Question

我有以下html -

<div id='slides'>
                <div id='slide1'>Slide1!</div>
                <div id='slide2'>Slide2!</div>
                <div id='slide3'>Slide3!</div>
</div>

我可以使用这个技术在三个按钮btnSlide1, btnSlide2, btnSlide3 -

之间滑动div

$(document).on('click', '#btnSlide1', function (e) {

    var slideW = $('#slides').width();

    e.preventDefault();
    $('#slides').animate({ scrollLeft: slideW }, 600);


});

然后根据点击的按钮添加或减去slideW。

这很好但是随着幻灯片数量的增加，这并没有真正扩展，所以我更喜欢的是下一个和上一个按钮，而不是单个幻灯片的单个按钮。

我的问题是只有两个按钮，slideW的上下文不再有效，因为我不知道按钮点击时我在哪张幻灯片。

有没有办法只使用next和prev选项？我试过 -

$(document).on('click', '#btnNext', function (e) {

    $('#slides').animate({ Left: '100%' }, 600);


});

然而，这导致第一张幻灯片部分向左移动。

当前JSFiddle

Answer 1

我保留了您的HTML / CSS，并添加了var current来跟踪当前幻灯片。

slideW = $('#slides').width();
current = 0;
$(document).on('click', '#prev', function(e) {

  if (current > 0 && current <= $('#slides').children().length - 1) {
    current--;
  }

  console.log(current);
  e.preventDefault();
  $('#slides').animate({
    scrollLeft: slideW * current - 100
  }, 600);

});

$(document).on('click', '#next', function(e) {

  if (current < $('#slides').children().length - 1)
    current++;
  console.log(current);
  e.preventDefault();
  $('#slides').animate({
    scrollLeft: slideW * current + 100
  }, 600);

});

演示：http://jsfiddle.net/86he7L41/1/

当然，有条件可以阻止不受欢迎的滚动：向左或向右 - 幻灯片的数量是有限的。

下一步和上一张幻灯片

1 个答案: