<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机翻转</title>
<style type="text/css">
body{
background-color: #ccc;
}
ul{
margin: 20px auto 0;
padding: 0;
600px;
}
li{
list-style-type: none;
float: left;
280px;
margin: 0 10px;
position: relative;
height: 120px;
overflow: hidden;
}
img{
height: 120px;
280px;
}
div{
position: absolute;
top:0;
}
</style>
</head>
<body>
<ul>
<li>
<div><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""></div>
</li>
<li>
<div><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/6.jpg" alt=""></div>
</li>
<li>
<div><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/2.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/4.jpg" alt=""><img src="img/3.jpg" alt=""></div>
</li>
<li>
<div><img src="img/8.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/6.jpg" alt=""><img src="img/5.jpg" alt=""></div>
</li>
</ul>
</body>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
var aDiv=document.getElementsByTagName('div');
var oLi=document.getElementsByTagName('li')[0];
var
//翻动一屏的长度。
H=parseFloat(getStyle(oLi,'height'));
function fn(obj){
//随机定时器的触发时间。
setTimeout(function(){
//做运动。
move(obj,'top',20,-obj.num*H,function(){
//进行下一次运动。
obj.num++;
obj.num%=obj.len;
//运动结束再次开始。
fn(obj);
});
//随机时间。
}, Math.random()*2000)
}
for(var i=0;i<aDiv.length;i++){
//用自定义属性保存可以翻动多少屏
aDiv[i].len=aDiv[i].getElementsByTagName('img').length;
aDiv[i].num=Math.floor(Math.random()*aDiv[i].len);//当前翻动的位置。
//通过传参实现多个翻动。
fn(aDiv[i]);
}
</script>
</html>
