幻燈片功能循環一次失敗

我試圖編寫一個函數，可以在div內滑過一組圖像，然後在到達結尾時循環返回（反之亦然，當去另一個方向時）。問題是，它能夠經歷一次循環，但是每當第二次循環出現時就會擰緊。我究竟做錯了什麼？幻燈片功能循環一次失敗

的HTML：

<img class="slide"> 
<img class="slide"> 
<img class="slide">

中的JavaScript：

var slideNumber = 0; 
var totalSlides = $('.slide').length; 


$(document).ready(function(){ 

var animateSlide = function(){ 

    $('.slide').eq(slideNumber).css('z-index', totalSlides); 

    } 

    $('.page-right').click(function(){ 

     if(slideNumber < totalSlides){ 

      $('.slide').eq(slideNumber).css('z-index', totalSlides-1); 

      slideNumber = slideNumber + 1; 

      return animateSlide(); 

     } 

     else if(slideNumber === totalSlides) { 

      $('.slide').eq(slideNumber).css('z-index', totalSlides-1); 

      slideNumber = 0; 

      return animateSlide(); 

     } 

    }); 


    $('.page-left').click(function() { 

     if (slideNumber < totalSlides) { 

     $('.slide').eq(slideNumber).css('z-index', totalSlides-1); 

     slideNumber = slideNumber - 1; 

     return animateSlide(); 

     } 

     else if(slideNumber === 0) { 

     $('.slide').eq(slideNumber).css('z-index', totalSlides-1); 

     slideNumber = totalSlides; 

     return animateSlide(); 


     } 

    }); 
}

來源

2014-04-10 user3183717

更簡單的方法來做到這一點是使用addClass與removeClass。創建一個名爲頂部滑動CSS類改變一溜的z-index：

.slide{ 
    z-index: 1; 
} 
.topSlide{ 
    z-index: 2; 
}

現在只需將該類添加到下一張幻燈片和上一張幻燈片中刪除類：

var $slides = $('.slides'), 
    numSlides = $slides.length; 
    index = 0;  
function nextSlide(){ 
    $slides.eq(index % numSlides).removeClass('top-slide'); 
    $slides.eq(++index % numSlides).addClass('top-slide'); 
}

不從0開始的eq索引，因此從類頂部幻燈片開始您的第一張幻燈片。現在，當你調用nextSlide時，索引將會增加。％（模數）只是檢查剩餘部分與幻燈片的數量。例如，當索引= 3（和numSlides = 3），則3％3 = 0，因此它會將第一張幻燈片設置爲頂部幻燈片。當索引= 4，然後4％3 = 1，所以第二張幻燈片將被設置爲最高等，等等...

讓我知道這是否合理！

來源

2014-04-10 22:01:27 MShah

幻燈片功能循環一次失敗

回答

相關問題