在JavaScript旋转图像脚本中添加淡入淡出效果

Question

如何在此javascript中添加淡入淡出效果？

我尝试在此脚本中制作淡入淡出或幻灯片效果但不起作用。 我的想法是在我的wordpress页面中制作幻灯片效果。我不想使用插件，因为我的页面非常慢，并尝试使用此javascript进行非常优化

var ultimateshow = new Array()
//ultimateshow[x]=["#", "OPTIONAL link for image", "OPTIONAL link target"] 
ultimateshow[0] = ['image1.jpg', '#']
ultimateshow[1] = ['image2.jpg', '#']

var slidewidth = "980px" // width 
var slideheight = "250px" // height 
var slidecycles = "2" // 
var randomorder = "no" //
var preloadimages = "yes" //preload images? "yes" or "no" 
var slidebgcolor = 'white'
var slidedelay = 3000
var ie = document.all
var dom = document.getElementById
var curcycle = 0

if (preloadimages == "yes") {
    for (i = 0; i < ultimateshow.length; i++) {
        var cacheimage = new Image()
        cacheimage.src = ultimateshow[i][0]
    }
}

var currentslide = 0

function randomize(targetarray) {
    ultimateshowCopy = new Array()
    var the_one
    var z = 0
    while (z < targetarray.length) {
        the_one = Math.floor(Math.random() * targetarray.length)
        if (targetarray[the_one] != "_selected!") {
            ultimateshowCopy[z] = targetarray[the_one]
            targetarray[the_one] = "_selected!"
            z++
        }
    }
}

if (randomorder == "yes") 
    randomize(ultimateshow)
else 
    ultimateshowCopy = ultimateshow

function rotateimages() {
    curcycle = (currentslide == 0) ? curcycle + 1 : curcycle
    ultcontainer = '<center>'
    if (ultimateshowCopy[currentslide][1] != "") ultcontainer += '<a href="' + ultimateshowCopy[currentslide][1] + '" target="' + ultimateshowCopy[currentslide][2] + '">'
    ultcontainer += '<img src="' + ultimateshowCopy[currentslide][0] + '" border="0">'
    if (ultimateshowCopy[currentslide][1] != "") 
        ultcontainer += '</a>'

    ultcontainer += '</center>'

    if (ie || dom) 
        crossrotateobj.innerHTML = ultcontainer

    if (currentslide == ultimateshow.length - 1) 
        currentslide = 0
    else 
        currentslide++

    if (curcycle == parseInt(slidecycles) && currentslide == 0) 
        return

    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") : document.all.slidedom
    rotateimages()
}

if (ie || dom) 
    window.onload = start_slider