幻燈片組件 - 小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

回答

相關問題