如何爲此Javascript幻燈片添加淡入淡出效果？

Question

下面的圖片幻燈片腳本按預期工作，它可以循環顯示帶有可選錨點鏈接和說明的圖片數組。

現在我想通過添加淡入/淡出效果來改進此腳本。任何幫助是極大的讚賞。

預先感謝您。

<script language="JavaScript1.2"> 
    var variableslide = new Array() 

    variableslide[0] = ['image1.jpg', 'link here', 'description'] 
    variableslide[1] = ['image2.jpg', 'link here', 'description'] 
    variableslide[2] = ['image3.jpg', 'link here', 'description'] 

    var slidewidth = '600px' 
    var slideheight = '250px' 
    var slidebgcolor = '#FFFFFF' 

    var slidedelay = 3000 

    var ie = document.all 
    var dom = document.getElementById 

    for (i = 0; i < variableslide.length; i++) { 
    var cacheimage = new Image() 
    cacheimage.src = variableslide[i][0] 
    } 

    var currentslide = 0 

    function rotateimages() { 
    contentcontainer = '<center>' 
    if (variableslide[currentslide][1] != "") 
     contentcontainer += '<a href="' + variableslide[currentslide][1] + '">' 
    contentcontainer += '<img src="' + variableslide[currentslide][0] + '" border="0" vspace="3">' 
    if (variableslide[currentslide][1] != "") 
     contentcontainer += '</a>' 
    contentcontainer += '</center>' 
    if (variableslide[currentslide][2] != "") 
     contentcontainer += variableslide[currentslide][2] 

    if (document.layers) { 
     crossrotateobj.document.write(contentcontainer) 
     crossrotateobj.document.close() 
    } else if (ie || dom) 
     crossrotateobj.innerHTML = contentcontainer 
    if (currentslide == variableslide.length - 1) currentslide = 0 
    else currentslide++ 
     setTimeout("rotateimages()", slidedelay) 
    } 

    if (ie || dom) 
    document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + ';  background-color:' + slidebgcolor + '"></div>') 

    function start_slider() { 
    crossrotateobj = dom ? document.getElementById("slidedom") : ie ? document.all.slidedom : document.slidensmain.document.slidenssub 
    if (document.layers) 
     document.slidensmain.visibility = "show" 
    rotateimages() 
    } 

    if (ie || dom) 
    start_slider() 
    else if (document.layers) 
    window.onload = start_slider 
</script> 
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide> 
    <layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer> 
</ilayer> 

Answer 1

你想要做什麼是編程減少圖像DOM對象的opacity財產淡出，而同時增加圖像的不透明度淡出。您啓動圖像0不透明度和工作淡入你的方式。

我發現用直JavaScript和jQuery的沒有或者其他框架你一個例子根據你的代碼風格 - 看你怎麼去用http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation

Answer 2

你可以使用jQuery？他們已經有了fadeIn和fadeOut，你可以在其中設置各種屬性，其中一個是以毫秒爲單位的持續時間（以確定它將持續多久）。

http://api.jquery.com/fadeIn/

如果必須使用純JS那麼它變得有點複雜。你需要與舊版瀏覽器兼容嗎？

最簡單的方法是setInterval，然後將不透明度降低到0，但並非所有的瀏覽器/版本都支持不透明度。