jQuery幻燈片圖像延遲

我有一個幻燈片，從右向左旋轉三個圖像。一切正常，除非圖像在前一張圖像已經完全滑出（在圖像之間留下空白區域）後滑入。我嘗試了與setInterval和hide和show函數不同的計時，但無濟於事。jQuery幻燈片圖像延遲

的JavaScript：

$(document).ready(function(){ 
    $(".slider .1").show("fade", 500); 
    $(".slider .1").delay(5500).hide("slide", {direction:"left"}, 500); 

    var sc = $(".slider img").size(); 
    var count = 2; 

    setInterval(function() { 
     $(".slider ."+count).show("slide", {direction:"right"}, 500); 
     $(".slider ."+count).delay(5500).hide("slide", {direction:'left'}, 500); 

     if(count == sc) { 
      count = 1; 
     } else { 
      count = count + 1; 
     } 
    }, 6500); 

});

CSS：

.slider { 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
    margin: 30px auto; 
    background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif'); 
    background-size: 50px 50px; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.slider img { 
    width: 200px; 
    height: 200px; 
    display: none; 
}

HTML：

<div class="slider"> 
     <img class="1" src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg" height="200" width="200"> 
     <img class="2" src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg" height="200" width="200"> 
     <img class="3" src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg" height="200" width="200"> 
    </div>

的jsfiddle：http://jsfiddle.net/6FF4y/2/

關於如何讓圖像互相擁抱（兩者之間沒有空間）的任何想法，因爲他們滑入/滑出？

注意：我沒有擁有任何圖像，也沒有將自己與他們託管的網站聯繫起來。我只是用這些作爲例子，因爲我實際使用的圖像只是在目錄中，而不是網址。

任何幫助將不勝感激！

來源

2013-08-24 Jace Cotton

你可以做一個jsFiddle嗎？ – DevlshOne

當然。掛上.. –

我將JS代碼從一個''onload'函數改爲'$（document）.ready（）'，因爲它將「Slider（）」視爲未定義的。（可能是因爲它在HTML之前讀取腳本？） –

這只是標記的一種情況。首先，你的班級名稱1,2和3是不正確的。一個班級永遠不能以數字開頭。其次，將您的圖片包裝在<div>的包裝中 - 包裝紙永遠都是不錯的！然後3圖像<div>的應該被包裹在一個內部包裝。你會想要滑動內包裝。你最好的選擇是可能使用jQuery animate並循環它。

這個小提琴怎麼樣？ http://jsfiddle.net/6FF4y/4/

來源

2013-08-25 01:32:57 html5understudy

完美！非常感謝你！ –

jQuery幻燈片圖像延遲

回答

相關問題