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();
});

我正面临这些问题：

目标幻灯片不会增加，因此我无法在下一个幻灯片中添加“活动”课程
无法弄清楚如何在单击按钮时将第一张图片放置在最后一个位置。

欢迎任何建议，谢谢！

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

jQuery手动在两行中滑动

1 个答案: