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

Question

我正在使用旋转木马，我想让 next/previous 按钮正常工作。

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

$($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/

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

jQuery Carousel Next / Previous Buttons

javascript

jquery

carousel