到达最后一张幻灯片后返回第一张幻灯片 - 使用 jQuery Slider答案

【问题标题】：Return to First Slide after reaching Last Slide - with jQuery Slider到达最后一张幻灯片后返回第一张幻灯片 - 使用 jQuery Slider
【发布时间】：2012-12-24 12:53:16
【问题描述】：

我有一个带有自动前进功能的 jQuery 滑块。但我想知道在到达最后一张幻灯片后如何返回第一张幻灯片。 currentSlide 变量（保存我们正在查看的当前幻灯片的索引）只是不断变大，在到达最后一张幻灯片后不会返回零。我没有为滑块本身包含所有的 jQuery 脚本，因为那会很大，而且我认为没有必要。代码如下：

<html>
<head>
</head>

<body>
<div class="slider" data-slide="0">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
</div>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">

$(window).load(function(){
    var currentSlide = $(".slider").attr("data-slide"); /*Every time a slide is viewed, the index number of that slide is added to an html5 data- attribute. That way, we know what slide we are on. This var stores that information. */
    var timeOut = null;

    (function autoAdvance(){
        $('.sliderNav').find('.sliderTrigger' + (currentSlide)).trigger('click',[true]); /* Automatically click the trigger that will advance the slider to the next slide. */
        currentSlide++;
        timeOut = setTimeout(autoAdvance,5000);
    })();

});

</script>
</body>
</html>

【问题讨论】：

标签： jquery slider

【解决方案1】：

...
var currentSlide = $(".slider").attr("data-slide"); 
var timeOut = null;
count = $(".slider").children().length;

(function autoAdvance(){
    $('.sliderNav').find('.sliderTrigger' + (currentSlide)).trigger('click',[true]); 
    if (count == currentSlide){
        currentSlide = 1;
    } else {
        currentSlide++;
    }
    timeOut = setTimeout(autoAdvance,5000);
    })();
...

【讨论】：

非常感谢，我不敢相信我没有想到这一点！只有一个问题：您需要更改 currentSlide = 1;到 currentSlide = 0;因为索引是从零开始的。