下一個和上一張幻燈片

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的上下文不再有效，因爲我不知道在按鈕單擊時我處於哪個幻燈片。

有沒有辦法只用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/

當然，還有條件以避免意外滾動：左或右 - 幻燈片的數量爲限。