JQuery滑块问题答案

【问题标题】：Issue with JQuery sliderJQuery滑块问题
【发布时间】：2014-07-15 14:18:33
【问题描述】：

我使用 Jquery 制作了一个滑块，该滑块功能正常，但一旦到达最后一张幻灯片，它就不会滑到第一张幻灯片，而是立即显示第一张幻灯片。它甚至不会停留在最后一张幻灯片上。

HTML：

<body>
    <div id="container">
        <div id="header">
            <h3>J-Slider</h3>
        </div>
        <div class="slider">
            <ul>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
                </li>
            </ul>
        </div>
    </div>
</body>

CSS：

body {
    font-family:Gerogia;
    font-size:15px;
}
#container {
    width:930px;
    margin:50px auto 10px auto;
    border-left:#666 solid 3px;
    border-right:#666 solid 3px;
    background:#f5f5f5;
    padding:20px 30px;
}
#header {
    padding:10px 0;
    border-bottom:#ccc solid 1px;
    overflow:hidden;
    text-align:center;
}
h3 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.slider {
    width: 750px;
    height: 400px;
    padding-top: 10px;
    margin-left: 75px;
    overflow: hidden;
}
.slider ul {
    width:8000px;
    list-style-type:none;
}
.slider li {
    float: left;
}

JQuery:

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width + 'px'
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

【问题讨论】：

应该像它一样自动滑动还是你想要一个点击功能？您希望幻灯片滑回第一张图片还是希望最后一张图片淡出然后第一张图片再次淡入？如果没有更多信息，很难提供帮助

标签： jquery css

【解决方案1】：

我稍微修改了你的代码，我将第一个元素的副本放在最后一个位置，并稍微修改了你的代码

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width + 'px'
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide >= $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

改变

if (currentSlide === $slides.length)

收件人：

if (currentSlide >= $slides.length)

一个例子：jsFiddle

更新：左侧图片边框问题

为了让这一切正常工作，我修改了你的 CSS（将 UL 的左边距设置为 0px）

.slider ul {
    width:8000px;
    list-style-type:none;
    padding-left: 0px
 }

更新 jsFiddle：jsFiddle

【讨论】：

【解决方案2】：

请查看jsfiddle 代码。或以下代码

也许你的解决方案。

$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');

setInterval(function () {
    $slideContainer.animate({
        'margin-left': '-=' + width + 'px'
    }, animationSpeed, function () {
        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            //$slideContainer.css('margin-left', 0);
            $slideContainer.animate({ 'margin-left': 0  


 }, pause ); 
                }
            });
        }, pause);
    });

【讨论】：

谢谢。但是有什么方法可以让滑块在最后一张图片上停留几秒钟（比如 2 秒）。正如您所看到的，一旦它到达最后一张图像，它就会立即滑回第一张图像。我已经尝试过 delay() 函数，但它与第一张幻灯片的动画时间不一致。
@DineshS 请检查此链接jsfiddle。第三次滑动它会停止 3 秒。
哈哈...现在它在最后一张幻灯片上停了 3 秒。但是从第二张幻灯片到第三张幻灯片的转换发生在一秒钟之内。从第二张幻灯片转到第三张幻灯片之前，它应该等待 3 秒。你看，delay() 函数搞乱了 setInterval() 函数的时间（间隔）。
@DineshS jsfiddle。这可能是您的正确解决方案。

【解决方案3】：

尝试更改增加幻灯片的方式和时间，以及将其重置回一张的时间。在您当前的 js 中，您递增到最后一张幻灯片，然后告诉它立即返回一张

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
    $slideContainer.animate({
        'margin-left': '-=' + width + 'px'
    }, animationSpeed, function () {
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
        } else {
            currentSlide++; // move this down here
        }
    });
}, pause);
});

【讨论】：

【解决方案4】：

我不是 Javascript 方面的专家，但我想我发现了你的问题。

当你做 currentSlide++ 的动画时，在你做检查之后 (currentSlide ==$slides)，所以你迭代你的 currentSlide 并且在你告诉他改变到第一个之后。正如之前所说的 mmseasor 把它放在后面。

对于您不返回的问题是因为在 if 循环中的操作上您忘记为 slideContainer 设置动画，所以它只是显示。

【讨论】：