哭 没调出来 笨啊笨
记录下来 明天继续 没办法 后天就上线了。
<!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="images/1.jpg" width="600" height="200"/></a></li> <li><a href="javascript:void(0)"><img src="images/2.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; var isFirst = true; function init(){ for(var i=0; i<len; i++){ setOpacity(li[i], 0); li[i].style.zIndex = len-i; } setOpacity(li[0],100); } var index = 0; function fadeIn(){ var num = 100; addTimer = setInterval(function(){ if(num<=0){ clearTimeout(addTimer); } setOpacity(li[0],num); //setOpacity(li[next],n); num-=10; //n += 10; },100); } function change(){ init(); fadeIn(); } /* function fadeIn(index, next){ var num = 100; var n = 0; addTimer = setInterval(function(){ if(num<=0){ clearTimeout(addTimer); } setOpacity(li[index],num); //setOpacity(li[next],n); num-=10; //n += 10; },100); } */ change(); /* var index = 0; function changeImage(){ if (isFirst){ init(); isFirst = false; } if(index == len){ index = 0 } var next = index + 1; if(next== len){ next = 0; } timer = setTimeout(function(){ // setOpacity(li[next], 100); for(var i=0; i<len; i++){ li[i].style.zIndex = ''; } li[index].style.zIndex = len; li[next].style.zIndex = len-1; fadeIn(index, next); setOpacity(li[next], 100); index++; changeImage(); },3000) } // changeImage(); //自动轮播的入口; /* 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); } */ </script> </html>