javascript淡入淡出的效果轮换转播后续

今天在网上找了个例子终于把这个困扰我几天的淡入淡出效果写出来了自己在火狐和IE6下试了下都没问题，一向我都不擅长写这些setTimeout和setInterval的例子，今天是参考了网上一个类似例子的做法，在原有基础上改动好了，不多说，先上代码：

<!DOCTYPE html>
<html>
<head>
    <title> fade in</title>
    <style>
    #out{width:600px; height:200px;margin:0 auto; border:1px solid #333; overflow:hidden}
    #out ul{margin:0; padding:0;position:relative;}
    #out li{list-style:none;float:left;position:absolute;}
    </style>
</head>
<body>
<div id="out">
<ul>
<li><a href="javascript:void(0)"><img src="image/1.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="image/2.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="image/3.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="image/4.jpg" width="600" height="200"/></a></li>
</ul>
</div>
<ul >
<li><a href="javascript:void(0);" onclick="showCertainImage(0)">0</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(1)">1</li>
<li><a href="javascript:void(0);" onclick="showCertainImage(2)">2</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(3)">3</a></li>
</ul>
</body>
<script>
    function Id(name){
        return document.getElementById(name);
    }    
    function setOpacity(ev, v){
        ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
        
    var out = Id("out");
    var li = out.getElementsByTagName('li');
    var len = li.length;
    
    for(var i=0; i<len; i++){
        li[i].style.zIndex = len-i;
    }
    
    function fadeIn(index){        
        var num = 100;
        var next = index+1;
        if(next== len){
            next = 0;            
        }
        for(var i=0; i<len; i++){  //参考网上例子 每次显示当前图片前 都将所有图片的z-index清空，只给当前图片和下一张图片设置z-index属性；
            li[i].style.zIndex = '';
        }
        li[index].style.zIndex = 2;    
        li[next].style.zIndex = 1;
        
        setOpacity(li[next], 100);        
        addTimer = setInterval(function(){
            if(num==0){
                clearTimeout(addTimer);
            }
            setOpacity(li[index],num);
            num-=10;            
        },50);        
    }
    
    var current = 0;    
    function changeImage(c){    
        if(!c){
            c = current;
        }
        timer = setTimeout(function(){        
            if(c == len){ //一轮播放结束后，再次从头播放；
                c = 0;
            }
            fadeIn(c); 
            c++; 
            
            changeImage(c);
        },3000)            
    }
    
    function showCertainImage(index){ //点击改变图片的入口；
        if(timer){
            clearTimeout(timer);
        }    
        var next = index+1;
        if(next == len){
            next = 0;            
        }
        for(var i=0; i<len; i++){
            li[i].style.zIndex = '';
        }
        li[index].style.zIndex = 2;            
        setOpacity(li[index], 100);
        
        changeImage(index);
    }    
    changeImage(); //自动轮播的入口;
</script>
</html>

大致的解释我都写在代码里了，这次比上次改进的地方在于index属性，每次执行fadein 不管之前的index如何，全部置空，然后将需要淡入的图片放在最上面，next的图片放在下面设置为不透明，点击的时候，所有图片的zindex置空，然后将当前图片设置为不透明然后放在最上层，这样确实便捷了很多，不管之前的z-index如何，每次都这样设置。

但这样的解决方案也有不妥，做不妥的是，每次执行当前前，首先是for循环置空，这个处理是否有些粗暴了呢~~，至少效率上是不高的。

另由于这个例子是为下一个工作中用的东西做demo,因此绑定事件啊全局变量啊等地方都没考虑，仅仅一个demo~~