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，有时它会完美地移动，有时它只会使身体向右极移动。为了让您清除，这里是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();

});

jQuery - 图像滑块不工作

3 个答案: