2016-01-26 85 views
2

我在jQuery中有此代碼。我有6個圖像的代碼,但是當它在6上時,它停止。我想從1開始重複一遍。我該怎麼做?jQuery - 重複圖像

<script type="text/javascript"> 
$(document).ready(function() { 

    var $slider = $('#slider'), 
     $prev = $('#prev'), 
     $next = $('#next'), 
     $slide = $slider.find('div'); 

    var currentSlide = 0, 
     allSlides = $slider.find('div').length - 1; // index start from 0 


    $slider.find('div').eq(0).show(); 

    function nextSlide() { 

     if(currentSlide < allSlides) { 

      $slide.eq(currentSlide).fadeOut('slow'); 
      $slide.eq(currentSlide + 1).fadeIn('slow'); 

      currentSlide+=1; 
     } 

    } 
    setInterval(function() { 
     nextSlide(); 
}, 5000); 
    function prevSlide() { 

     if(currentSlide > 0) { 

      $slide.eq(currentSlide).fadeOut(400); 
      $slide.eq(currentSlide - 1).fadeIn(400); 

      currentSlide-=1; 
     } 
    } 
    $next.on('click', nextSlide); 
    $prev.on('click', prevSlide); 

}); 
</script> 

回答

0

只需設置currentSlide滑動,從你開始

function nextSlide() { 

    if(currentSlide < allSlides) { 

     $slide.eq(currentSlide).fadeOut('slow'); 
     $slide.eq(currentSlide + 1).fadeIn('slow'); 

     currentSlide+=1; 
    }else{ 
     currentSlide = 0; 
    } 

} 

對於prev設置currentSlide到最後一個

function prevSlide() { 

    if(currentSlide > 0) { 

     $slide.eq(currentSlide).fadeOut(400); 
     $slide.eq(currentSlide - 1).fadeIn(400); 

     currentSlide-=1; 
    }else { 
     currentSlide = allSlides-1;  
    } 
}