褪色圖像滑塊

我試圖淡入淡出圖像。我不確定是否事先預先加載圖像更好。相當多發生的事情是，淡入淡出的下一個圖像中褪色前打全白背景，但我希望它消失立刻而不是顯示白色背景 - 如果是有道理的：褪色圖像滑塊

$(document).ready(function() { 
    var $next, 
     cycle; 
    var i = 0; 
    var imgArr = ['1.jpg', '2.jpg', '3.jpg']; 

    $activeLi = $("#slideshow li"); 
    $activeLi.html('<img src="images/' + imgArr[i] + '" />'); 
    cycle = setInterval(change_img, 1000); 

    function change_img(){ 
     clearInterval(cycle); 
     $activeLi.find('img').fadeOut('slow', function(){ 
      $activeLi.html('<img src="images/' + imgArr[i] + '" />').fadeIn('slow'); 
     }); 

     i = (i == (imgArr.length - 1)) ? 0 : ++i; 
     cycle = setInterval(change_img, 1000); 
    } 
});

也就是它更好地在褪色他們之前先預先處理我的圖像？

JSFiddle

我的解決方案（這是厭倦sinced我開始的問題...）

$(document).ready(function() { 
    var $next, 
     cycle; 
    var i = 0; 
    var durTimer = 2000; 
    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; 

    $activeLi = $("#slideshow li"); 
    $activeLi.first().html('<img src="images/' + imgArr[0] + '" />'); 
    cycle = setInterval(change_img, durTimer); 

    function change_img(){ 
     clearInterval(cycle); 
     var nxtImg = (i == imgArr.length) ? 1 : i; 
     $activeLi.last().html('<img src="images/' + imgArr[nxtImg] + '" />'); 
     $activeLi.find('img').animate({opacity:0}, {duration: durTimer}); 

     i = (i == (imgArr.length - 1)) ? 0 : ++i; 
     $activeLi.first().html('<img src="images/' + imgArr[i] + '" />'); 
     cycle = setInterval(change_img, durTimer); 
    } 
});

來源

2013-08-02 Derp

我很樂意幫忙，你有jsfiddle嗎？ – Seano666

它沒有我猜想的圖像，但它的要點在那裏... http://jsfiddle.net/De63Q/ – Derp

預加載（除非你有*微小*圖像）更好，因爲那麼第一個圖像可以在剩餘下載時顯示，並且在使用時，該請求只需要驗證304狀態（未修改），這比下載快得多。它會減緩第一次運行時的淡入淡出/幻燈片播放速度，但可能意味着每張圖片可以節省幾秒鐘。爲了避免空白，你可能希望在他們的部分運行時中重疊'fadeOut（）'和'fadeIn（）'。 – Trojan

如果有限的影像數量，最好是在加載所有的人頁面加載。

在給出的示例中，您只使用一個img標記，並在一段時間後將其源替換爲另一個圖像。

因此，當圖像淡出時，我們肯定會看到白色背景。加載新圖像也需要一些時間。

而不是一個單一的img標籤，添加三個img標籤（從您的代碼，有三個圖像）。
同時啓動動畫fadeOut和fadeIn。
fadeOut當前圖像和fadeIn爲下一張圖像。

這不會顯示任何白色背景。

我已經爲此創建了一個小演示。

看看這個：http://db.tt/q8VPb03U

來源

2013-08-02 03:25:28

那麼這個陣列最終會變成動態的，所以我不得不用3個圖像替換3個圖像。 – Derp

請勿更換任何圖像。在頁面加載時自己添加三張圖片。但風格他們顯示所有三個圖像一對一（給一些位置）。然後你只需要淡入淡出，淡入淡出。無需更改任何圖像的'src'屬性。 –

這是否解決您的問題？讓我知道。 –

褪色圖像滑塊

回答

相關問題