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（＆＃39; .slides图像＆＃39）。单击（函数（E）{ var active_slide = jQuery（＆＃39; #page-slider .slides-image img：visible＆＃39;）;
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
});

滑块下一个按钮问题

1 个答案: