js2

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 124px;
/*border: 1px solid gray;*/
margin: 0 auto;
overflow: hidden;
position: relative;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="images/1.jpg" alt="" width="200"/>
<img src="images/2.jpg" alt="" width="200"/>
<img src="images/3.jpg" alt="" width="200"/>
<img src="images/4.jpg" alt="" width="200"/>
</div>
<div id="div2"></div>
<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var imgs = div1.getElementsByTagName('img');
window.onload=function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = i*200+'px';
}
}

function imgMove(){
// div2.innerHTML="";
var bl = true;
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = imgs[i].offsetLeft-1+'px';
// div2.innerHTML+=imgs[i].offsetLeft+",,";

if(imgs[i].offsetLeft==0){
bl = false;
if(i==0)
imgs[imgs.length-1].style.left=(imgs.length-1)*200+1+'px';
else
imgs[i-1].style.left=(imgs.length-1)*200+1+'px';
}

}
if(bl)
setTimeout(imgMove, 50);
else
setTimeout(imgMove, 5000);
}

setTimeout(imgMove, 5000);
</script>
</body>
</html>

这是我们的家庭作业，这个感觉也不简单，这是我们一起做出来的作业，但是我现在感觉还是有点感觉！

posted on 2017-03-12 21:43  叫哥  阅读(97)  评论(0)    收藏  举报