jQuery幻燈片 - 圖像轉換問題

我正在製作此幻燈片，但是當圖像設置爲動畫時，我會獲得白色閃光燈，然後顯示下一張圖像。這有點難以解釋，所以我創建了這個http://jsfiddle.net/2SJ8B/ 我想它與我的css有關？jQuery幻燈片 - 圖像轉換問題

#slideshow { 
    width: 700px; 
    height: 400px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid; 
} 

#slideshow img { 
    position: absolute; 
    height: 500px; 
    width: 700px; 
}

你會注意到它不是一個流暢的動畫，但有一些事情正在進行。謝謝！

來源

2012-11-22 SeanWM

請添加您的瀏覽器和操作系統的相關信息。 –

@ArashMilani我不認爲瀏覽器或操作系統是問題，但它的窗口7與鉻 – SeanWM

試試這個更新的小提琴......

http://jsfiddle.net/2SJ8B/5/

的關鍵是在運行褪色完成後fadeIn()命令功能...

$('#slideshow img:first').appendTo('#slideshow').fadeIn(1000, function() { 
    $(this).siblings().hide(); 
});

這意味着它拍攝第一張圖像，將其放在最後一張（在它的前面），然後淡入。一旦完成，它會隱藏所有其他圖像。一秒鐘後，它重複。現在雙重衰落消失了，白色的「閃光」消失了。

來源

2012-11-22 19:26:23 Archer

我認爲它幾乎在那裏。唯一的事情是，第二個幻燈片不會在開始時顯示出來。它顯示標題而不是圖像。 – SeanWM

感謝您的幫助。你按照我之前的回覆嗎？ – SeanWM

你認爲你可以看看我的第一條評論嗎？謝謝！ – SeanWM

我認爲你的問題是通過淡入淡出的中途，兩張照片都有50％的透明度，所以你看到25％的白色背景。這可能被認爲是「閃現」。考慮不淡出傳出圖像，而是在淡入完成後隱藏它（使用setTimeout()）。

來源

2012-11-22 19:16:17 onon15

jQuery幻燈片 - 圖像轉換問題

回答

相關問題