<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#lunbo{
position:relative;
margin: 100px auto;
width: 500px;
height: 150px;
overflow: hidden;
}
#lunbo ul{
position: absolute;
left: 0;
top: 0;
}
#lunbo li{
float: left;
height: 150px;
width: 200px;
list-style: none;
}
#lunbo li img{
width:200px;
height: 150px;
}
</style>
</head>
<body>
!!!
!!!
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("lunbo")
var oUl=document.getElementsByTagName('ul')[0]
var oLi=document.getElementsByTagName('li')
var timer=null
oUl.innerHTML+=oUl.innerHTML
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
//oul.innerHTML=oUl, innerHTML+oUl.innerHTML,与前面oUl.innerHTNL +=oUL.innerHTML一样
timer=setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetwidth/2){//判断2个ul长度,如果到一半了,就Left归e
oUl.style.left='0'}
oUl.style.left=oUl.offsetLeft-2+'pX'//定时器改变uL的Left值。每次uL的eft都-2pX
},30)
//鼠标移入,停止移动
oDiv.onmousemove=function(){
clearInterval(timer)
}
//鼠标移出,继续移动
oDiv.onmouseout=function(){
timer=setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0'}
oUl.style.left=oUl.offsetLeft-2+'px'
}, 30)
}
}
</script>
</body>