随机翻动图片

HTML

<ul class="clearFix">
	<li class="fl">
		<div>
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
		</div>
	</li>
	<li class="fl">
		<div>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
		</div>
	</li>
	<li class="fl">
		<div>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
		</div>
	</li>
	<li class="fl">
		<div>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>
		</div>
	</li>
	<li class="fl">
		<div>
			<img src="img/5.jpg"/>
			<img src="img/7.jpg"/>
		</div>
	</li>
	<li class="fl">
		<div>
			<img src="img/7.jpg"/>
			<img src="img/8.jpg"/>
		</div>
	</li>
</ul>

<script src="mTween.js" type="text/javascript" charset="utf-8"></script>
<script src="tween.js" type="text/javascript" charset="utf-8"></script>

　　

CSS

body{
	background: #000;
}
ul{
	width: 900px;
	padding: 0;
	margin: 0 auto;
}
li{
	width: 400px;
	height: 200px;
	list-style: none;
	float: left;
	margin-right: 10px;
	margin-top: 5px;
	overflow: hidden;
	position: relative;
	border: 1px solid #fff;
}
li div{
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0;
}
img{
	width: 400px;
	height: 200px;
	vertical-align: top;
}

JS

var aLi=document.getElementsByTagName("li");
	var num=0;
	
	for (var i=0;i<aLi.length;i++) {
		fn(aLi[i]);
	}
	
	function fn(obj){
		var oDiv=obj.getElementsByTagName("div")[0];
		function fn1(){
			setTimeout(function(){
				num = num==0?-200:0;
				mTween(oDiv,"top",num,500,"linear",fn1);
			},Math.random()*600+200);
		}
		fn1();
	}