一：html部分
<body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1">/*外框，显示区域*/ <ul id="ul1">/*循环滚动的内容,下面js控制赋值一份相同的内容*/ <li>111111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul> </div> </body>
二：样式表内容
<style> *{ margin: 0; padding: 0; } #div1{ width: 640px; height: 120px; margin: 100px auto; background-color: #646464; position: relative; overflow: hidden; } #div1 ul{ position:absolute; left:0; top:0; overflow: hidden; background-color: #3b7796; } #div1 ul li{ float: left; width: 160px; height: 120px; list-style: none; } </style>
三：js部分
*定义一个速度变量speed，贯穿整个滚动过程
*把html中的滚动部分，复制一份。相当于两份一样的滚动内容
*move()方法，通过判断滚动的位置，当第一份内容的最后一副图滚动完成，就让其回复初始位置。
<script> window.onload = function(){ /*1.定义滚动的内容、定义速度变量speed、定义滑动部分的宽度=图片数量*图片宽度*/ var oDiv = document.getElementById('div1'); var oUl = document.getElementById('ul1'); oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2） var oLi= document.getElementsByTagName('li'); oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下 var speed = 2;//初始化速度 /*2.给左右按钮加点击事件*/ var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var timer = setInterval(move,30);//全局变量 ，保存返回的定时器 oBtn1.addEventListener('click',function(){ speed = -2; },false); oBtn2.addEventListener('click',function(){ speed = 2; },false); /*3.给鼠标加划入划出事件*/ oDiv.addEventListener('mouseout', function () { timer = setInterval(move,30); },false); oDiv.addEventListener('mouseover', function () { clearInterval(timer);//鼠标移入清除定时器 },false); /* 定义移动的move()方法*/ function move(){ if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时 oUl.style.left = 0; } if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时 oUl.style.left = -(oUl.offsetWidth/2)+'px'; } oUl.style.left = oUl.offsetLeft + speed + 'px'; } } </script>