<!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=gb2312" />
<title>无缝滚动</title>
<style>
* {margin:0; padding:0;}
#div {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div ul {position:absolute; left:0; top:0;}
#div ul li {float:left; width:178px; height:108px; list-style:none;}
img{width:178px; height:108px;}
</style>
<script>
window.onload=function(){
var div=document.getElementById("div");
//var col=document.getElementById("col");
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
ul.innerHTML+=ul.innerHTML;
ul.style.width=li[0].offsetWidth*li.length+"px";
var speed=-2;
document.getElementsByTagName("a")[0].onclick=function(){
speed=-2;
}
document.getElementsByTagName("a")[1].onclick=function(){
speed=2;
}
function move(){
if(ul.offsetLeft<-ul.offsetWidth/2){
ul.style.left="0"
}
if(ul.offsetLeft>0){
ul.style.left=-ul.offsetWidth/2+"px";
}
ul.style.left=ul.offsetLeft+speed+"px";
}
var timer=setInterval(move,30);
div.onmouseover=function(e){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(move,30);
}
}
</script>
<script>
function randomColor(){
var rand="#"+Math.floor(Math.random() * 0xFFFFFF).toString(16);
if(rand.length == 7){
//alert(rand);
var colo=document.getElementById("col");
colo.innerHTML=rand;
document.getElementById("col").style.backgroundColor=rand;
return rand;
}else{
return randomColor();
}
}
setInterval(function(){
randomColor();
},1000);
</script>
</head>
<body>
<a href = "javascript:;">向左走</a>
<a href = "javascript:;">向右走</a>
<!--<div id="div">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
-->
</div>
<div id="col" style="width:1000px;height:1000px;background:#FFF;margin:0 0 0 100px;"></div>
</body>
</html>