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

});