今天在网上找了个例子 终于把这个困扰我几天的淡入淡出效果写出来了 自己在火狐和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~~