下一个和上一张幻灯片

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/

当然，还有条件以避免意外滚动：左或右 - 幻灯片的数量为限。