幻灯片组件 - 小bug

我试图构建一个小型幻灯片组件使用jquery只是为了学习的目的（我不想重新发明轮子）。幻灯片组件 - 小bug

的组件是非常简单的：

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.显然，因为我说去幻灯片0，如果用户达到幻灯片索引5。我不知道如何解决这个问题到现在。

我敢肯定，我忘了这件事很愚蠢。

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

非常感谢！马克

来源

2017-04-17 Mark

所以我找到了我的问题的答案，我只是忘了添加另一个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。现在，我就可以跳上第二组幻灯片...

来源

2017-04-18 01:32:34 Mark

幻灯片组件 - 小bug

回答

相关问题