HTML滑动效果实战-优快云博客

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}
#div ul{ position:absolute; height:100px; left:0;}
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left}
</style>
<script>
window.οnlοad=function(){
	var oDiv=document.getElementById("div");
	var oUl=oDiv.getElementsByTagName("ul")[0];
	var oLi=oUl.getElementsByTagName("li");
	var oInput=document.getElementsByTagName('input');
	oUl.innerHTML +=oUl.innerHTML;
	oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
	var iSeep=-2;
	var tamer=null;
	
	
	clearInterval(tamer);
	function starMove(){
		 tamer=setInterval(function(){
			
			oUl.style.left=oUl.offsetLeft+iSeep+"px";
			if(-oUl.offsetLeft >= oUl.offsetWidth/2){
				oUl.style.left="0px";
			}else if(oUl.offsetLeft>0){
				oUl.style.left=-oUl.offsetWidth/2+"px";
			}
		},30)
	}
	starMove();
	oDiv.οnmοuseοver=function(){
		clearInterval(tamer);
	}
	oDiv.οnmοuseοut=function(){
		starMove();
	}
	oInput[0].οnclick=function(){
		iSeep=-2;
	}
	oInput[1].οnclick=function(){
		iSeep=2;
	}
}
</script>
</head>

<body>
<input type="button" value="左">
<input type="button" value="右">
<div id='div'>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
</body>
</html>

闲来没事做个滚动效果练手，希望大神们多提建议，此段代码如果有bug或能优化的地方大家用于提出自己的看法……