滑塊下一步按鈕問題

Question

我有一個簡單的滑塊，我想添加「下一步」按鈕，將我帶到下一張幻燈片。我還需要做的是回到第一張幻燈片，一旦用戶到達最後一張幻燈片。

我至今是：

jQuery('#next_test').click(function(e){ 

showSlide = 0; 

slidesLength = jQuery('#page-slider .slides-image img').length; 
active_slide = jQuery('#page-slider .slides-image img:first'); 

next = showSlide+1; 
showSlide = next; 


jQuery('#page-slider .slides-image img').eq(showSlide).fadeIn(700); 

return false 
}); 

滑塊建，我可以通過提供其數量（showSlide）顯示幻燈片的方式。 因此，我試圖將初始數字設置爲0，這將是第一張幻燈片，然後，每次用戶單擊時，它都會導致他到下一張幻燈片，這意味着下一個數字。最後它會再次從第一個數字開始。

上面的代碼增加了目標幻燈片的數量，但只增加了一次。我如何完成這項工作？是否需要foreach循環？

Answer 1

該解決方案需要獲取活動幻燈片及其索引。然後，通過將滑動索引增加1，該按鈕將轉到下一張幻燈片。由於第一張幻燈片的索引爲0，因此必須創建條件語句，以確保幻燈片索引不大於幻燈片的數量，並防止它進入不存在的幻燈片。 。

jQuery的（ '幻燈片圖像 '）點擊（函數（e）中{ VAR active_slide = jQuery的（' ＃頁滑塊.slides圖像IMG：可見'）;
變種active_index = active_slide.index （）; var showSlide = 0;

var slidesLength = jQuery('#page-slider .slides-image img').length; 

    var showSlide = active_index+1; 
    if(showSlide > slidesLength-1){ 
     showSlide = 0; 
    } 
    jQuery('#page-slider .slides-nav a').eq(showSlide).addClass('active'); 
    jQuery('#page-slider .slides-nav a').eq(showSlide-1).removeClass('active'); 
    jQuery('#page-slider .slides-image img').eq(showSlide).fadeIn(700); 
    jQuery('#page-slider .slides-image img').eq(showSlide-1).hide(); 

return false 
});