具有自动播放功能的jQuery滑块不会在最终幻灯片上暂停

Question

我正在尝试制作一个简单的滑块，该滑块在每张幻灯片上停留5秒（每张幻灯片4个元素），然后返回到第一张幻灯片并再次运行。

元素的数量可能从1到16不等。

现在，我的滑块没有在上一张幻灯片上暂停。它直接回到第一个。

有什么想法吗？谢谢

这里是fiddle。

var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;

$(function() {
    if ( itemNbr > 4) {
        setInterval(function () {
            $('ul').animate({
                'margin-left' : '-='+width}, 700, function () {
                currentSlide++;
                if (currentSlide >= itemNbr/4) {
                    currentSlide = 1;
                    $('ul').animate({
                        'margin-left' : '0px'},700
                    ); 
                };
            });
        },5000);
    };
});

Answer 1

您可以通过以下方式修改setInterval函数：

var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;

$(function() {
    if ( itemNbr > 4) {
        setInterval(function () {
        if (currentSlide >= itemNbr/4) {
            $('ul').animate({'margin-left' : '0px'}, 700); 
            currentSlide = 1; // Edit
        }
        else {
            $('ul').animate({'margin-left' : '-='+width}, 700);
            currentSlide++;
        }
        },5000);
    };
});

wrapper {
  width:100%;
  overflow:hidden;
}
ul {
  width:300vw; height:320px;
  list-style:none;
  padding:0; margin:0;
  overflow:hidden;
}
ul li {
  width:80vw;
  height:60px;
  display:inline-block;
  margin:10px 10vw;
  background-color:red;
  padding:0;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<wrapper>
  <ul>
    <li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li>
  </ul>
</wrapper>