0

我有一个简单的滑块，我想在其中添加“下一个”按钮，它将带我进入下一张幻灯片。一旦用户到达最后一张幻灯片，我还需要做的是返回第一张幻灯片。

到目前为止，我所拥有的是：

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 循环？

4

1 回答 1

0

该解决方案需要获取活动幻灯片及其索引。然后通过将幻灯片索引增加一，按钮将转到下一张幻灯片。由于第一张幻灯片的索引为 0，因此必须创建条件语句以确保幻灯片索引不大于幻灯片的数量并防止其到达不存在的幻灯片。

jQuery('.slides-image').click(function(e){ var active_slide = jQuery('#page-slider .slides-image img:visible');
var 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
});
于 2013-02-21T09:24:24.857 回答