<!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>
相关分类