幻燈片的jQuery圖像索引

Question

我製作了一個小幻燈片腳本來循環顯示圖像列表。它的問題是在next（）和prev（）函數中選擇當前索引。

查看幻燈片時，它會執行一次太多的next（），導致沒有圖像顯示在一張幻燈片上。該指數太高。當單擊上（），它似乎坐在0指數（無圖像有）的點擊幾下，然後踢回在7

這裏是jQuery代碼

jQuery('.slideshow').css({'position': 'relative', 'width': 240, 'height': 263}).find('img').css('display', 'none'); 
jQuery('.slideshow').find('img').eq(startingSlide).css('display', 'block'); 

jQuery('.slideshow span').click(function() 
{ 
    if (jQuery(this).hasClass('span2')) 
    { 
     var currentSlide = jQuery('.slideshow img:visible').prevAll().length; 

     jQuery('.slideshow').find('img').eq(currentSlide) 
     .css('display', 'none').next('img').css('display', 'block').css({top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce'); 
    } 
    else 
    { 
     var currentSlide = jQuery('.slideshow img:visible').prevAll().length; 

     jQuery('.slideshow').find('img').eq(currentSlide) 
     .css('display', 'none').prev('img').css('display', 'block').css({top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce'); 
    } 
}); 

關於如何解決任何想法索引？

Answer 1

我更新了你的代碼，它還需要一些細化，但我不想混淆這種情況。如果您對此問題有任何疑問，請詢問。代碼塊後面有一點解釋。

var $slideshow = jQuery('.slideshow'), 
    $images = $slideshow.find('img'); 

$slideshow.css({'position': 'relative', 'width': 240, 'height': 263}); 
$images.css('display','none').eq(startingSlide).css('display', 'block'); 

$slideshow.find('span').click(function() 
{ 
    if (jQuery(this).hasClass('span2')) 
    { 
     var $currentSlide = $images.filter(':visible'), 
      $nextSlide = $currentSlide.next('img'); 

     if(!$nextSlide.length) $nextSlide = $images.filter(':first')); 

     $currentSlide.css('display','none'); 
     $nextSlide.css({ display: 'block', top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce'); 
    } 
    else 
    { 
     var $currentSlide = $images.filter(':visible'), 
      $prevSlide = $currentSlide.prev('img'); 

     if(!$prevSlide.length) $prevSlide = $images.filter(':last'); 

     $currentSlide.css('display','none'); 
     $prevSlide.css({ display: 'block', top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce'); 
    } 
}); 

重要的是在這裏得到.next('img')或.prev('img')和測試結果的length財產。如果它等於0而不是結束或開始，所以一定要選擇相反的img以繼續幻燈片放映。