JavaScript控制多张图片循环播放（淡入淡出效果）

<style>
.imgShow{
    font-size: 12px;
    background-color: #B0C6CE;
    text-align: center;
    vertical-align: middle;
    display: table-caption;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position:absolute;
    width:400px;
    height:300px;
}
.imgHide{
    font-size: 12px;
    background-color: #B0C6CE;
    text-align: center;
    vertical-align: middle;
    display: table-caption;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position:absolute;
    filter:alpha(opacity=0);
    opacity:0.00;
    width:400px;
    height:300px;
}
</style>
<script>
    var hideTime=null;
    var hide=100;//过滤镜初始值，IE
    var hideFF=1.0;//过滤镜初始值，FF
    var show=0;
    var showFF=0.00;
    var imgShow=1;
    var imgSrcArray=new Array("http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0001.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0004.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0005.jpg");

    function hideObject(hideImage,showImage){
        try{
            hidehide=hide-1;
            hideFFhideFF=hideFF-0.01;
            showshow=show+1;
            showFFshowFF=showFF+0.01;
            hideImage.style.filter="alpha(opacity="+hide+")";
            hideImage.style.opacity=hideFF+"";/*FF兼容*/
            //hideImage.style.-moz-opacity=hideFF+"";
            showImage.style.filter="alpha(opacity="+show+")";
            showImage.style.opacity=showFF+"";/*FF兼容*/
            if(hide<=0){
                showImage.style.filter="alpha(opacity=100)";
                showImage.style.opacity=1.0;/*FF兼容*/
                window.clearInterval(hideTime);
                hideImage.style.display="none";
                window.setTimeout(changeImage,1000);
            }
        }catch(e){
            window.clearInterval(hideTime);
        }       
    }
    function changeImage(){
        hide=100;
        hideFF=1.0;
        show=0;
        showFF=0.0;
        imgShow++;
        if(imgShow>imgSrcArray.length){
            imgShow=1;
        }
        var img1=document.getElementById("img1");
        var img2=document.getElementById("img2");
        var imageShow,imageHide;
        if(img1.style.display=="none"){
            img1.className="imgHide";
            img2.className="imgShow";
            img1.style.display="";
            img1.src=imgSrcArray[imgShow-1];
            imageShow=img1;
            imageHide=img2;
        }else{
            img2.className="imgHide";
            img1.className="imgShow";
            img2.style.display="";
            img2.src=imgSrcArray[imgShow-1];
            imageShow=img2;
            imageHide=img1;
        }
        
        hideTime=window.setInterval(function(){hideObject(imageHide,imageShow);},20);
    }
</script>

<img class="imgShow" id="img1" src="/image/1.jpg">
<img class="imgHide" id="img2" src="/image/2.jpg">

<pre></pre>
http://blog.csdn.net/lip009/archive/2008/07/26/2712344.aspx