幻灯片组件 - 小错误答案

【问题标题】：slideshow component - small bug幻灯片组件 - 小错误
【发布时间】：2017-04-17 19:01:32
【问题描述】：

我正在尝试使用 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（如果用户单击下一张）。或者反过来（如果用户从点击“prev”开始）到达幻灯片 6。

问题：

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

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

我很确定这是我忘记做的傻事。

这是一个 jsfiddle 链接：https://jsfiddle.net/marco321/beah5v0d/

非常感谢！标记

【问题讨论】：

标签： javascript jquery dom

【解决方案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。现在，我将能够跳转到第二组幻灯片...

【讨论】：