Question

我正在尝试使用jquery构建一个小型幻灯片组件，仅用于学习目的（我并没有尝试重新发明轮子）。

该组件非常简单：

HTML：

<div class="slideshow">
  <div class="slideshow-controller prev">
    <p>prev</p>
  </div>
  <div class="slideshow-wrapper">
    <img src="//placehold.it/150x200/FF9800" alt="">
    <img src="//placehold.it/150x200/757575" alt="">
    <img src="//placehold.it/150x200/BDBDBD" alt="">
    <img src="//placehold.it/150x200/2196F3" alt="">
    <img src="//placehold.it/150x200/00BCD4" alt="">
    <img src="//placehold.it/150x200/009688" alt="">
  </div>
  <div class="slideshow-controller next">
    <p>next</p>
  </div>
</div>

JS：

(function($) {
  var prev = $('.prev');
  var next = $('.next');
  var img = $('.slideshow-wrapper img');

  var slides = 2;

  img.slice(slides).css({ 'display': 'none' });

  next.on('click', function() {
    img.css({ 'display': 'none' });
    img.slice(slides, slides + 2).css({ 'display': '' });

    slides += 2; 

    if (slides === 8) 
        { slides = 0; img.slice(slides, slides + 2).css({ 'display': '' }); }

    console.log('next');
    console.log(slides);
  });

  prev.on('click', function() {
    slides -= 2;
    if (slides === 0) { slides = 6; }

    img.css({ 'display': 'none' });
    img.slice(slides - 2, slides).css({ 'display': '' });

    console.log('previous');
    console.log(slides);
  });
}(jQuery));

我能够检测到是否到达最后一张幻灯片，它会返回到幻灯片索引0（如果用户点击下一张）。或者反过来（如果用户通过点击＆＃34开始; prev＆＃34;）到达幻灯片6.

问题：

一旦成功达到说（0到6）并重新启动，前两张幻灯片会显示两次（您需要点击两次才能通过第一张幻灯片）。

我使用console.log(slides)来查看问题，看起来它变为0然后2.显然因为我说如果用户达到幻灯片索引5则转到幻灯片0.我不知道到现在为止如何解决这个问题。

我很确定我忘记了这件事是愚蠢的。

这是一个jsfiddle链接：the android docs

非常感谢！马克

Answer 1

所以我找到了问题的答案，我只是忘了添加另一个if else语句。

if (slides === 8) { 
  slides = 0; 
  img.slice(slides, slides + 2).css({ 'display': '' }); 
  if (slides === 0) { 
    slides = 2; img.slice(slides).css({ 'display': 'none' }); 
  }
}

一旦我检测到幻灯片是索引0，那么我只需将其重新分配给2.现在，我将能够跳到第二组幻灯片......

幻灯片组件 - 小错误

1 个答案: