<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
#div1 {width:712px;height:108px;margin:100px auto;}
#div1 ul {position:absolute;left:0;top:0;}
#div1 ul li{width:200px;height:200px;background: red;position: absolute;left:200px;top:150px;}
</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;//4+4==8
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move(){ //定时器函数
if(oUl.offsetLeft<-oUl.offsetWidth/2){//offsetLeft偏移量，往左是负数,offsetWidth宽度，是正数。左移
oUl.style.left='0';//坐标重置为0
}
if(oul.style.left>0){//右移,负数变0表示右移过了4个li了
oUl.offsetLeft=-oUl.offsetWidth/2+'px';//左偏移量 变成 -宽度一半，表示8个li居中.0不加px,有数字的要加px
}
oUl.style.left=oDiv.offsetLeft+speed+'px';//给当前对象左边距+2px右移 并返回
}
var timer=setInterval(move,30);//参数里面运行有名函数move不用带(),这是js区别于java的不同点
//添加鼠标移入事件
oDiv.onmouseover=function(){//这是匿名类实现方式
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
};
}
</script>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
