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

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

<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>

来源

2013-01-10 Jesse Macleod

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

来源

2013-01-10 07:39:38 primetwig

非常感谢，我简直不敢相信我没想到！只有一个问题：你需要改变currentSlide = 1;到currentSlide = 0;因为索引是基于零的。 –

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

回答

相关问题