代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
712px;
height: 108px;
margin: 100px auto;
position: relative;
overflow: hidden; /*如果去掉此项，则将图片设置成只能显示四张滚动 */
}
#div1 ul {
/* 此项必须设置*/
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left; /* 此项必须设置*/
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');
var speed = -2;
//oUl.innerHTML=oUl.innerHTML+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);
};
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="img2/1.jpg" alt="此处为第一张图片"/></li>
<li><img src="img2/2.jpg" alt="此处为第二张图片"/></li>
<li><img src="img2/3.jpg" alt="此处为第三张图片"/></li>
<li><img src="img2/4.jpg" alt="此处为第四张图片"/></li>
</ul>
</div>
</body>
</html>
运行结果（其中图片在匀速向左滚动）：
