問題與JQuery循環插件，Webkit瀏覽器和圖像

我想創建一個使用jQuery的動畫橫幅，而不是使用動畫的gif。 Cycle插件在FireFox中執行此操作，但在Safari和Chrome中，在初始加載頁面時，我沒有觀察到「幻燈片放映」，只能看到單個圖像。我試圖通過.load（）解決這個問題，預載圖像，並使用display：隱藏在後續圖像上，每個都沒有成功。奇怪的是，我注意到，加載的單個圖像實際上是所有圖像中最小的圖像（文件大小）。問題與JQuery循環插件，Webkit瀏覽器和圖像

任何輸入表示讚賞。我很難過。

jQuery(document).ready(function() { 
    $('#banner').cycle({ 
     fx: 'none', 
    delay: 0, 
    speed: 500, 
    autostop: true, 
     autostopCount: 8, 
timeoutFn: function(currElement, nextElement, opts, isForward) { 
      opts.myTimeoutCount = (opts.myTimeoutCount + 1) % opts.myTimeouts.length; 
      return opts.myTimeouts[opts.myTimeoutCount]; 
    }, 
    myTimeouts: [1000,1000,500,500,500,2000,2000,1000], 
    myTimeoutCount: 0 
    }); 
}); 


<div id="banner"> 
    <img src="images/if_300x250_banner_1.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_2.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_3.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_4.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_5.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_6.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_7.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_8.gif" width="300" height="250" />

來源

2011-08-05 touchoftech

你只是想循環瀏覽每個圖像，用正在進行的圖像取代當前圖像？ – RobB

是Rob，正是我想要做的。不過，我需要能夠控制每個圖像顯示的時間，因此TimeoutFN功能。 – touchoftech

持久性回報。事實證明，問題不在JQuery，Cycle Plugin或Webkit瀏覽器中，而與圖像有關。我用來創建GIF的源PSD在動畫時間軸上保存了Photoshop圖層，並且當我在Photoshop中使用「Save for Web &設備」時，這些數據被包含在內 - 有趣的是，它並未在Firefox中引起問題。解決方案是在動畫面板中簡單地「刪除動畫」，並再次保存gif。

感謝所有這些人的思考。

來源

2011-08-06 07:48:14 touchoftech

問題與JQuery循環插件，Webkit瀏覽器和圖像

回答

相關問題