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，一张一张地滑动图像，如果是第三张图像，那么应该再次出现第一张图像，依此类推。

问题在于，这并不总是能够正确地进行。 有时它仅移动1px，有时它移动完美，有时仅使身体动画至极右。 为了使您清醒，这是一个小提琴 。

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();

});