jQuery - 图像滑块不工作

Question

所以我想用jQuery制作图像滑块。图像保持一致，图像从右向左滑动。下面是代码：

HTML：

<div id="1" style="width: 100%; min-height: 100%; display: inline;"><img src="1.png" /></div> 
<div id="2" style="width: 100%; min-height: 100%; display: inline;"><img src="2.png" /></div> 
<div id="3" style="width: 100%; min-height: 100%; display: inline;"><img src="3.png" /></div> 

而这里的jQuery的：

$(document).ready(function(){ 
    i = 1 
    setInterval(function(){ 
     $("html, body").animate({ 
      marginLeft: -($("#"+i).offset().left/2) 
     }, 1500, "swing"); 
     i = ++i % 4; 
     if(i==0) i = 1 
     console.log(i); 
    }, 2500); 

}); 

我想到的是： Obivo，滑动图片逐个，如果它的第三个图像，然后第一个图像应该再次出现，依此类推。

问题是，这并不总是滑ri ght的方式。有时它只移动1px，有时它会完美移动，有时它只会让身体变成极右的动画。为了让你清除，这里是一个fiddle。

Answer 1

正如我在评论中所说的ID不能以数字开头。因此，尝试改变它像

<div id="mydiv_1" ... 
<div id="mydiv_2" ... 
<div id="mydiv_3" ... 

，并在此更改

... 
marginLeft: -($("#mydiv_"+i).offset().left/2) 
... 

Answer 2

所以我通过改变算法中解决了这个问题，这样做：

$(document).ready(function() { 
    i = 1 
    setInterval(function() { 
     $("html, body").animate({ 
      marginLeft: -(($("#mydiv" + i).width()*i)/2) 
     }, 1500, "swing"); 
     ++i; 
     if(i == 3) i = 0 
     console.log(i); 
    }, 2500); 

}); 

只是删除了offset的事情，用width()*i，使其工作正确的方式。 :)

Answer 3

可能，这将帮助你有旋转效果，

简单的CSS将是：

#mainDiv { 
     position: relative; 
     width: 980px; 
     height: 347px; 
    } 

    .images { 
     display: none; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

HTML：

<div id="mainDiv"> 
    <img class="images" src="~/1.jpg" width="980" height="347" /> 
    <img class="images" src="~/2.jpg" width="980" height="347" /> 
    <img class="images" src="~/3.jpg" width="980" height="347" /> 
</div> 

的Javascript：

$(window).load(function() { 
    var ImageRotator = 
    { 
     init: function() { 
      var initialFadeIn = 1000; 
      var itemInterval = 2500; 
      var fadeTime = 1500; 

      var numberOfItems = $('.images').length; 
      var currentItem = 0; 
      $('.images').eq(currentItem).fadeIn(initialFadeIn); 
      var imageLoop = setInterval(function() { 
       $('.images').eq(currentItem) 
       .fadeOut(fadeTime); 

       if (currentItem == numberOfItems - 1) { 
        currentItem = 0; 
       } else { 
        currentItem++; 
       } 
       $('.images').eq(currentItem) 
       .fadeIn(fadeTime); 

      }, itemInterval); 
     } 
    }; 

    ImageRotator.init(); 

});