jQuery滑塊不能完美循環

我目前有一個問題，我的背景圖像滑塊。它在第一次運行時效果很好，但第二次在可見時將圖片「顛簸」到右側，而不是在不可見時這樣做。我希望你們中的一些人花時間研究這一點。將不勝感激。jQuery滑塊不能完美循環

我正在使用的代碼：

HTML的一部分：

<div id="logo"> 
    <img src="images/5.jpg"> 
    <img src="images/6.jpg"> 
    <img src="images/7.jpg"> 
    <img src="images/8.jpg"> 
    <img src="images/9.jpg"> 
    <img src="images/10.jpg"> 
    <img src="images/11.jpg"> 
</div>

CSS部分：

#logo img { 
    min-height: 100%; 
    width:110%; 
    height: 100%; 
    position: fixed; 
    top:0px; 
    left: 0px; 
}

的JavaScript：

var slideshow = 0; 
var currentImageIndex = 0; 

var nextImage = function() { 
    var $imgs = $('#logo > img'); 
    currentImageIndex++; 

    if (currentImageIndex > $imgs.length) { 
     currentImageIndex = 1; 
    } 

    $('#logo > img:nth-child(' + currentImageIndex + ')') 
     .fadeIn(function() { //.fadeIn() .show() 

     $(this).animate({ 
      left: '-75px' 
     }, 8000, 'linear') 

     $(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show() 

     $(this).css({ 
      left: '0px' 
     }) 
    }) 
};

，並點擊時，它的觸發：

$(".hexagoncontainer7").click(function() { 
    if (slideshow == 0) { 
    nextImage(); 
    slideshow=1; 
    } 
});

來源

2014-09-29 Dion

我現在沒時間了，但這裏是一個起點小提琴：http://jsfiddle.net/isherwood/3aaLa976 – isherwood 2014-09-29 21:33:42

這裏有幾件事要改進。希望這會給你一個良好的開端：

目前，你在每個nextImage()調用搜索您的圖片DOM兩次：

var $imgs = $('#logo > img');和$('#logo > img:nth-child(' + currentImageIndex + ')')。

搜索DOM在計算上花費很大，只有在必要時才應該這樣做。相反，如果您需要一次又一次地處理相同的元素（就像處理圖像一樣），請選擇一次，然後將它們存儲在變量中供以後使用。
在下面幾行：
```
$(this).animate({left: '-75px'}, 8000, 'linear') 
$(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show() 
$(this).css({left: '0px'}) 
```
幾件事情需要加以固定。首先，第3行刪除上一遍遺留的圖像上的任何偏移量。在步驟順序的開始處（即使在fadeIn之前），您需要執行此步驟，而不是在其結果延遲的末尾。

接下來，您不需要在之前調用delay(100)，因爲animate()可以讓您提供回調，該回調將在動畫完成後調用。在回調中提供您的淡出輸出代碼。

另外，注意fadeOut首先需要duration作爲參數，則回調complete，即你的電話應該是fadeOut(1200, nextImage)如果你想淡出效果執行超過1200毫秒。

最後，jQuery讓你chain functions，這將節省你幾個對jQuery函數的調用。
在第一次點擊後，您應該考慮removing#logo上的點擊處理程序，以避免用戶單擊多次時出現意外行爲。
當前您的圖像以相反的順序堆疊在一起。你需要用CSS隱藏除第一個之外的所有內容。
不要忘記分號並將您的功能命名爲動作，即loadNextImage - 您的代碼將更易於閱讀。

這裏是一個工作撥弄着所有的變化：http://jsfiddle.net/stiliyan/4bo0258p/（從一個伊舍伍德叉貼）

如果你想學習使用jQuery更多最佳實踐我的CodeSchool強烈推薦Try jQuery課程。

來源

2014-09-29 23:51:13 Stiliyan

謝謝，幫了很多！我想了解更多關於jQuery ofcourse的知識，並且我已經在前一段時間嘗試了jQuery課程。我現在知道了解決問題的方法，但並非最佳。我想這只是時間和練習的問題。 – Dion 2014-09-30 08:01:23

jQuery滑塊不能完美循環

回答

相關問題