<!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>
添加回答
举报
0/150
提交
取消