jQuery手动滑动两行

Question

通过构建滑块来学习 jQuery。我的意图是制作两行图片，它们将根据按钮单击在左侧或右侧滑动一张图片的宽度。另外，我希望滑块是无止境的。

这是 jsfiddle：http://jsfiddle.net/L590q2ct/7/（注意：使用“下一步”按钮）

我的 jQuery 如下：

$('#next').click(function() {
var first = $('.slide').eq(0);
var count = $('.slide').length;
var last = $('.slide').eq(count-1);
var width = $('.slide').width();

first.addClass('active');

var slide = function() {
    target = $('.active').index();
    target === last.index() ? target = 0 : target = target+1; //target won't increse
    nextSlide(target);
    console.log(target)
}

var nextSlide = function(target) {
    $('#top').animate({'left': '-' + width + 'px'},300);  //moving target picture to the left
    $('.slide').removeClass('active').eq(target).addClass('active');
}

slide();
});

我面临这些问题：

1. 目标幻灯片不会增加，因此我无法将“活动”类添加到下一张
2. 不知道如何在单击按钮时将第一张图片放在最后一个位置。

欢迎任何建议，谢谢！

Answer 1

您正在做的主要问题是，您每次单击下一个按钮时都将first 元素设置为active，这就是目标永远不会改变的原因。

第二件事是您每次都将margin-left设置为图像的宽度，而您应该将其移动target*width以匹配应显示的元素。

var first = $('.slide').eq(0);
var count = $('.slide').length;
var last = $('.slide').eq(count - 1);
var width = $('.slide').width();
first.addClass('active');

$('#next').click(function() {
  var slide = function() {
    target = $('.active').index();
    target = target === count-1 ?  0 : target + 1;      
    nextSlide(target);
        console.log(target)
  }

  var nextSlide = function(target) {
    $('#top').animate({
      'margin-left': '-' + target*width + 'px'
    }, 300);
    $('.slide').removeClass('active').eq(target).addClass('active');
  }

  slide();

});

这是Working example