滑块下一步按钮问题

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