<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0;
}
#div1{
width:1320px;
height:213px;
margin:100px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0;
top:0;
}
#div1 ul li{
float: left;
width:330px;
height:213px;
list-style: none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0]
var aLi=oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft-speed+'px';
}
var timer=setInterval(move,30);
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
}
</script>
</head>
<body>
<div id="div1">
<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>
</body>
</html>
