Javascript jQuery-图像滑块不工作

所以我尝试用jQuery制作一个图像滑块。图像保持在一条直线上，图像从右向左滑动。代码如下：

HTML:

我期望的是：

---

Obivo，要逐个滑动图像，如果是第三个图像，则第一个图像应再次出现，依此类推

---

问题是，这并不总是朝正确的方向滑动。有时候它只移动1px，有时候它移动得很完美，有时候它只是让身体在最右边活动。为了让您明白，这里有一个。

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

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

---

因此，我通过改变算法解决了这个问题，并做到了：

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

});

---

刚刚删除了

偏移量

并使用

width（）*i

使其正确工作：

这可能有助于你产生旋转效果

简单的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>

---

你的预期行为是什么？Obivo，一个接一个地滑动图像，如果是第三个图像，那么第一个图像应该会再次出现，依此类推。我建议你尝试使用可以自动设置为滑动图像的位置。不能以数字开头。否，@user2167382这些图像在我的网站上显示为背景，因此实际上不可能这样做。：）

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

});

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

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

<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>

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

});