淡出過渡Javascript？

我在用Javascript編寫的我的index.html文件中有一個小的幻燈片，當前只是從圖像跳轉到圖像。我希望能夠找到可以添加的淡入淡出效果，因此它會在一段時間後淡入一張圖像並顯示在下一張圖像上。不過，我對Javascript還是比較陌生的，不太清楚如何去做。以下是我現在有：淡出過渡Javascript？

<script type="text/javascript"> 
    <!--   
    var step=1 
    function slide() { 
     document.images.slide.src=eval("image"+step+".src") 
     if(step<10) 
      step++ 
     else 
      step=1 
     setTimeout("slide()",2500) 
    } 
    slide() 
    //--> 
</script>

來源

2013-04-02 Beaniie

使用jQuery輕鬆完成。如果你想單獨使用JavaScript，那麼有幾十個腳本，一個簡單的Google搜索就會發現。如果你想自己寫，大多會問你至少在提問之前做出一些努力。 – iGanja

我已經看過周圍的問題是我不知道如何將兩個不同的腳本鏈接在一起... – Beaniie

'eval（「image」+ step +「。src」）'??? –

我不知道jQuery是如何這樣做，但CSS3 transitions是做它的方式。

這是一個非常小的代碼，它的表現比任何JavaScript解決方案都要好。

您可以參考這裏的例子：http://css3.bradshawenterprises.com/cfimg/

CSS3過渡由目前所有的瀏覽器都支持。 IE9似乎沒有它，而不是很好的褪色，它會立即改變圖像。所以它應該是安全的。

來源

2013-04-02 02:07:18

該腳本將幻燈片放映一樣處理圖像，並自動將下一個圖像內嵌到其位置。沒有懸停或連接。另外Css3仍然有點冒險，意味着更多的工作可以找到其他瀏覽器的解決方法。 – Beaniie

即使CSS3沒有得到您可能遇到的每個瀏覽器的普遍支持，但這與任何瀏覽器都是一樣好的解決方案。 – iGanja

@ user2220339建議您預載圖像。如果您根據需要加載圖像，則可能永遠無法獲得所需的淡入淡出效果。請參閱CSS3示例中的演示6。 – iGanja

淡出過渡Javascript？

回答

相關問題