滚动的东西,具体见下面注释,然后做下分离;

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
#div1{ width: 712px ;height: 108px;margin: 100px auto 0;position: relative;
background: red;overflow: hidden}
#div1 ul{position: absolute;left: 0; top: 0;}
#div1 ul li {float: left; width: 178px; height: 108px;list-style: none}

</style>
<script>
window.onload= function () {
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");//为了配合下面复制后的增加宽度,如果不增加ul的宽度,就不在一条线上了
var speed=-2;

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //自己相加,相当于复制;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//这里是把li的宽度xli的个数;这样宽度就刚好可以装下li了;

move=function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';//当这个距离左边的距离小于宽度的一半时候,把这oUl的left=0.让它重新走一遍;上面=-oUl.offsetwidth,因为距离左边的最少是0不能为负数,我们为了相等,可以在前面加个-号,这样就可以自由运行了;
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';//当左边距离大于0的时候,把它拉回来;后面必须要加px;0可以不加,有数字的必须加;
}
oUl.style.left=oUl.offsetLeft+speed+"px";
};
var Timer=setInterval(move,30);

oDiv.onmouseover=function()
{
clearInterval(Timer);
};
oDiv.onmouseout=function()
{
Timer=setInterval(move,30);//这个时候不能用var Timer=setInterval(move,30);如果这样,鼠标放上去就会越来越快的移动;
};

document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
};
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images2/1.jpg"></li>
<li><img src="images2/2.jpg"></li>
<li><img src="images2/3.jpg"></li>
<li><img src="images2/4.jpg"></li>
</ul>
</div>
</body>
</html>