javascript - jQuery 轮播下一个/上一个按钮

Question

这是 Link to the Fiddle .

我正在使用旋转木马，我想让下一个/上一个按钮起作用。

我尝试添加以下代码，但它没有正确更新索引。任何帮助将不胜感激!

$($btnNext).click(function (event) {
     updateSlides(index + 1);
     event.preventDefault();
 }
 $($btnPrev).click(function (event) {
     updateSlides(index - 1);
     event.preventDefault();
 }

Answer 1

当这些按钮上的 click 事件被调用时，index 变量是未定义的。有几种不同的方法来确定索引，我在 fiddle 中使用的方法是在 slider 上设置一个 attribute 然后在 click 上检查它 事件:

 function updateSlides(index, paused) {
     $($slider).attr('data-index', index);
     ...
 }

 $($btnNext).click(function (event) {
     var index = parseInt($('.slider').attr('data-index'));
     if(index > $('.slider .content li').length) {
         index = 0;
     }
     console.log('#next', index);
     updateSlides(index + 1);
     event.preventDefault();
 });

 $($btnPrev).click(function (event) {
     var index = parseInt($('.slider').attr('data-index'));
     if(index < 0) {
         index = 0;
     }
     console.log('#previous', index);
     updateSlides(index - 1);
     event.preventDefault();
 });

请在此处查看更新的 fiddle :http://jsfiddle.net/sbp76sLc/14/