JQuery滑块的问题

我已经使用Jquery制作了一个滑块，它可以正常工作，但是当它到达最后一张幻灯片时，它不会滑到第一张，而是会立即显示第一张幻灯片。而且它不会停留在最后一张幻灯片上，哪怕是一秒钟

HTML:

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

---

尝试更改增加幻灯片的方式和时间，以及将其重置为1的时间。 在当前的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);
});

---

我不是Javascript专家，但我想我已经解决了你的问题

当您设置动画时，您将执行currentSlide++，并在执行检查之后（currentSlide==$slides），因此您将迭代您的currentSlide，并在您告诉他更改为第一个幻灯片之后。正如之前所说的那样，我会把它放在后面

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

请检查代码。或低于代码

也许是你的解决方案

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

---

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

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

致：

例如：

更新：左侧图像边框出现问题

为了使所有这些都能正常工作，我修改了你的css（将UL的左边距设置为0px）

---

更新的JSFIDLE:

它应该像它那样自动滑动，还是需要单击功能？您希望幻灯片滑回第一张图片还是希望最后一张图片淡出，然后第一张图片再次淡出？没有更多的信息很难帮助你谢谢。但是有没有办法让滑块在最后一张图像上停留几秒钟（比如说2秒钟）。正如你们所看到的，当它到达最后一张图片时，它会立即滑回第一张图片。我已经尝试了delay（）函数，但它扰乱了第一张幻灯片的动画计时。@DineshS请检查此链接。对于第三张幻灯片，它停止3秒。哈哈。。。现在它在最后一张幻灯片上停止3秒。但从第二张幻灯片到第三张幻灯片的转换只需一秒钟。在从第二张幻灯片转到第三张幻灯片之前，它应该等待3秒钟。你看，delay（）函数弄乱了setInterval（）函数的计时（间隔）。@DineshS。这可能是适合您的正确解决方案。

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

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