在按钮上播放淡出/淡出滑块点击

Question

我创建了淡入淡出/淡出滑块。它的工作发现在汽车。我想通过点击next/prev按钮来播放滑块。

HTML

<section class="wrapper"> 
<ul class="slider"> 
    <li><img src="http://www.tylershields.com/images/gallery/art_gallery.jpg" alt="" /></li> 
    <li><img src="http://www.goa-tourism.com/images/photogallery/1287634889_pid_kala%20academy%20art%20gallery.jpg" alt="" /></li> 
    <li><img src="http://www.magnoliabakery.com/uploads/GalleryImageModel/105/filemask/mag1003_magnolia_fall_14original.gallery.jpg" alt="" /></li> 
    <li><img src="http://www.lancasterconventioncenter.com/_images/_gallery/gallery15.jpg" alt="" /></li> 
</ul> 
<button data-dir="prev">Prev</button> 
<button data-dir="next">Next</button> 
</section> 

CSS

*    {margin:0; padding:0;} 
.wrapper  {width:800px; margin:0 auto; max-width:100%;} 
.slider   {position:relative;} 
.slider li  {position:absolute; top:0; left:0; list-style:none; width:100%; opacity:0;} 
.slider li img    {width:100%;} 
.slider li:first-child  {position:relative; display:block; opacity:1;} 

脚本

var current = 0, 
    elem = $('.slider li'), 
    slides = $('.slider li').length, 
    speed = 3000, 
    transSpeed = 1000; 

function autoSlide(){ 

    current = (current == (slides-1)) ? 0 : +1; 

    $('.slider').find('li') 
     .filter(':eq('+ current +')').addClass('current').animate({'opacity':1}, transSpeed) 
     .siblings('li').removeClass('current').animate({'opacity':0}, transSpeed); 
    }; 

var timer = setInterval(autoSlide, speed); 

$('button').on('click', function(){ 
    clearInterval(timer); 
    autoSlide(); 
    timer =setInterval(autoSlide, speed); 
}); 

Fiddle Demo

Answer 1

您的问题是在这条线：

current = (current == (slides-1)) ? 0 : current + 1 // you were doing +1 which will always return 1 

你current变量总是设置为1

希望这将帮助！

Fiddle Demo

---

更新

要移动一个和下一个你需要检查被点击的按钮，你只使用一个处理器两个，请参见下面的代码：

你可以点击元素到autoSlidefunction(element)

的完整代码

function autoSlide(element) { 
    var clicked = $(element).text().toLowerCase().trim(); // Get next or prev 
    if (clicked == "next") 
     current = (current == (slides - 1)) ? 0 : current + 1; // Current will be incremented 
    else 
     current = (current == 0) ? 0 : current - 1; // decrease in current 
    $('.slider').find('li') 
     .filter(':eq(' + current + ')').addClass('current').animate({ 
      'opacity': 1 
     }, transSpeed) 
     .siblings('li').removeClass('current').animate({ 
      'opacity': 0 
     }, transSpeed); 
}; 

var timer = setInterval(autoSlide, speed); 

$('button').on('click', function() { 
    clearInterval(timer); 
    autoSlide($(this)); // to get clicked element to autoSlide() 
    timer = setInterval(autoSlide, speed); 
}); 

Updated Fiddle