向左右上下滚动简单javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向左右上下滚动简单javascript</title>
<style type="text/css">
*{padding: 0; margin: 0;}
#scroll{ width: 200px; overflow: hidden; height: 100px; margin: 0 auto; border: 1px solid #ccc; position: relative; }
#scroll ul{ position: absolute; top: 0; left: 0; }
#scroll span{ cursor: pointer; background: red; }
#scroll ul li{ width: 50px ; height: 100px; background: green; display: block; float: left; margin-right: 5px; }
#scroll-left{ height: 400px; overflow: hidden; width: 60px; margin: 0 auto; border: 1px solid #f00; position: relative; }
#scroll-left ul{ position: absolute; top: 0; left: 0; }
#scroll-left span{ cursor: pointer; background: red; }
#scroll-left ul li{ width: 50px ; height: 100px; background: green; display: block; margin: 5px 0 5px 5px; }
</style>
</head>
<body>
<div>
<div style="width: 700px; margin: 0 auto; border: 1px solid #ccc;">
<span>左</span>
<div id="scroll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<span>右</span>
</div>
<div style="width: 700px; margin: 0 auto; border: 1px solid #ccc;">
<span>上</span>
<div id="scroll-left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<span>下</span>
</div>
<script type="text/javascript">
window.onload = function(){
/*var scro = document.getElementById("scroll");
var oUl = scro.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oA = document.getElementsByTagName("span");
var iNum = 4
var iSpeed = 2;
var timer = null;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = (oLi[0].offsetWidth * oLi.length) + "px";
function getRight(){
oUl.style.left = oUl.offsetLeft + iSpeed + "px";
if(oUl.offsetLeft + 25 <-oUl.offsetWidth/2){
oUl.style.left = "0px";
}else if(oUl.offsetLeft>0){
oUl.style.left = ((-oUl.offsetWidth/2)-25)+"px";
}
}
timer = setInterval(getRight,30);
oA[0].onclick = function(){
iSpeed = -2;
}
oA[1].onclick = function(){
iSpeed = 2;
}
oUl.onmouseover = function(){
clearInterval(timer);
}
oUl.onmouseout = function(){
timer = setInterval(getRight,30);
}*/
var scro = document.getElementById("scroll-left");
var oUl = scro.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oA = document.getElementsByTagName("span");
var iNum = 4
var iSpeed = 2;
var timer = null;
oUl.innerHTML += oUl.innerHTML;
oUl.style.height = (oLi[0].offsetHeight * oLi.length) + "px";
function getTop(){
oUl.style.top = oUl.offsetTop + iSpeed + "px";
if(oUl.offsetTop + 25 <-oUl.offsetHeight/2){
oUl.style.left = "0px";
}else if(oUl.offsetTop>0){
oUl.style.top = ((-oUl.offsetHeight/2)-25)+"px";
}
}
timer = setInterval(getTop,30);
oA[2].onclick = function(){
iSpeed = -2;
}
oA[3].onclick = function(){
iSpeed = 2;
}
oUl.onmouseover = function(){
clearInterval(timer);
}
oUl.onmouseout = function(){
timer = setInterval(getTop,30);
}
}
</script>
</body>
</html>