jQuery - 图像滑块不工作答案

【问题标题】：jQuery - Image Slider Not WorkingjQuery - 图像滑块不工作
【发布时间】：2014-03-25 09:28:35
【问题描述】：

所以我正在尝试用 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。

【问题讨论】：

你的预期行为是什么？
Obivo，一张一张地滑动图片，如果是第三张图片，那么第一张图片应该再次出现，依此类推..
我可以建议您尝试使用jquerytools.org/demos/scrollable，您可以在其中设置自动幻灯片图像
身份证不能以数字开头
不，@user2167382 这些图像在我的网站上显示为背景，因此实际上不可能这样做。 :)

标签： javascript jquery html css

【解决方案1】：

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

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

在这里修改

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

【讨论】：

【解决方案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 使它以正确的方式工作。 :)

【讨论】：

【解决方案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();

});

【讨论】：