在到達最後一張幻燈片後返回第一張幻燈片 - 使用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

回答

相關問題