<!DOCTYPE html><html><head>?? ?<meta charset="UTF-8">?? ?<title>Document</title>?? ?<style>?? ? ul,li,p{margin:0;padding:0;list-style:none;}?? ? div{width:200px;height:270px;border:2px solid yellow;position:relative;overflow: hidden;margin-top:60px;margin-left:100px;}?? ? ul{position:absolute;left:0;top:0;width:1000px;}?? ? li{float:left;width:200px; height:270px;}???? p{width:200px;opacity:0.6;text-align:center;height:40px;line-height:40px;position:absolute;left:0;top:230px;background:#000;font-weight:bolder;color:#fff;}?? ?</style></head><body>?? ?<div>?? ??? ?<ul>?? ??? ??? ?<li><img src="01.png" alt=""></li>?? ??? ??? ?<li><img src="02.png" alt=""></li>?? ??? ??? ?<li><img src="03.png" alt=""></li>?? ??? ??? ?<li><img src="04.png" alt=""></li>?? ??? ??? ?<li><img src="05.png" alt=""></li>?? ??? ?</ul>?? ??? ?<p></p>?? ?</div><script>?? ??? ? window.onload=function(){?? ??? ??? ?var oUl=document.getElementsByTagName("ul")[0];?? ??? ??? ?var oP =document.getElementsByTagName("p")[0];?? ??? ??? ?var atext=['第1個圖','第2個圖','第3個圖','第4個圖','第5個圖'];?? ??? ??? ?var timer=null;?? ??? ??? ?var num=0;???? function move(){?if(num==atext.length-1){num=0;oUl.style.left=0+'px';}?oP.innerHTML=atext[num];? num++;? doMove(oP,"top",20,230,doMove(oP,"top",20,270,doMove(oUl,"left",50,-200*num)));} ??timer=setInterval(move,6000);//要實現的功能是：圖片顯示，文字出現，文字消失，圖片下一張顯示，下一張文字出現。。循環? //問題一：oP的top沒有上下的變化//問題二：移入移出沒反應//題外問題：對于嵌套的定時器，內外定時器的時間設定有點疑惑????? oUl.onmouseover=function(){clearInterval(timer); }?? ?oUl.onmousout=function(){ timer=setInterval(move,500)}??? ?function? doMove(obj,attr,dir,target,endFn){??? ?dir=parseInt(getStyle(obj,attr))<target?dir:-dir;??? ?clearInterval(obj.timer);??? ?obj.timer=setInterval(function(){??? ??? ?var speed=parseInt(getStyle(obj,attr))+dir;??? ??? ?if(speed >target&&dir>0 ||speed < target && dir<0){speed=target;}??? ??? ?obj.style[attr]=speed+"px";??? ??? ?if(speed==target){??? ??? ??? ?clearInterval(obj.timer);??? ??? ??? ?endFn&&endFn();?? ???? ??? ?}??? ?},350)}?? function getStyle(obj,attr){?? ?return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}?? ??? ?}?? ?</script></body></html>
關于定時器的問題，請指教，謝謝！
楓樹下的雨
2016-03-24 22:17:31