一向我都不擅长做这种含setTimeout 和setInterval结合的例子，绕呼一会就把自己绕进去了，这次因为工作需要，我提前写个demo出来，防止到时候时间紧完不成。
没怎么看网上的例子，先自己写了下
自动的淡入淡出已经做出来了，但是点击切换到指定图片还没做出来，今天下午没什么精神，中午吃多了撑的不舒服，没思考的精力了。
先贴下代码：
<!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"/>0</a></li> <li><a href="javascript:void(0)"><img src="image/2.jpg" width="600" height="200"/>1</a></li> <li><a href="javascript:void(0)"><img src="image/3.jpg" width="600" height="200"/>2</a></li> <li><a href="javascript:void(0)"><img src="image/4.jpg" width="600" height="200"/>3</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(index+1 == len){ next = 0; } setOpacity(li[next], 100); li[index].style.zIndex = len-index; addTimer = setInterval(function(){ if(num==0){ clearTimeout(addTimer); li[index].style.zIndex = index; } setOpacity(li[index],num); num-=10; },50); } var rax = 0; function changeImage(x){ if(!x){ x = rax; } timer = setTimeout(function(){ if(rax == len){ rax = 0; } fadeIn(rax); rax++; changeImage(rax); },5000) } function showCertainImage(index){ if(timer){ clearTimeout(timer); } /*if(index == 0){ setOpacity(li[index],100); for(var i=1; i<len; i++){ setOpacity(li[i],0); } } for(var i=0; i<index; i++){ setOpacity(li[i],0); setOpacity(li[index],100); } changeImage(index); */ } changeImage(); </script> </html>
这个是全部的代码，逐段的解释下给自己听：
function fadeIn(index){ var num = 100; var next = index+1; if(index+1 == len){ next = 0; } setOpacity(li[next], 100); li[index].style.zIndex = len-index; addTimer = setInterval(function(){ if(num==0){ clearTimeout(addTimer); li[index].style.zIndex = index; } setOpacity(li[index],num); num-=10; },50); }
这段是单个图片的淡入过程，淡入淡出我在写的过程中发现还涉及到了z-index这个属性，这个使问题稍微讨厌了一点。 setOpacity(li[next], 100)的作用是：首先让下一张
图片显示出来，这样才能使该图有一个慢慢隐退到下一张的感觉。
function changeImage(x){ if(!x){ x = rax; } timer = setTimeout(function(){ if(rax == len){ rax = 0; } fadeIn(rax); rax++; changeImage(rax); },5000) }
这个就是整体的轮换了，最初的时候是没有x这个内置参数的，后来在指定切换图片时，发现需要告之从哪张开始轮换，就加了这个参数。
目前整体自动切换的效果已经出来了，但切换到指定图片的效果尚不理想。先记录下，待会去网上找找看下别人的例子是如何处理的，我再来继续完善。