<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
li {
float: left;
list-style-type: none;
}
ul {
z-index: 10;
position: absolute;
width: 2000px;
height: 200px
}
.img_item {
width: 200px;
height: 200px;
}
div {
left: 100px;
top: 100px;
position: absolute;
width: 1000px;
height: 200px;
overflow: hidden;
}
</style>
<input type="button" name="name" value="左" id="left" />
<input type="button" name="name" value="右" id="right" />
<div>
<ul id="ul_box">
<li>
<img src="a6189de972494360df2db2140db81e49.jpg" class="img_item" />
</li>
<li>
<img src="b4eee4a4f162745ebb5c0f676b1045ba.jpg" class="img_item" />
</li>
<li>
<img src="dcab10748c31dcfc75f4ba6a36a313fb.jpg" class="img_item" />
</li>
<li>
<img src="f38f0c784dbcb4080f03cf41ed0864b5.jpg" class="img_item" />
</li>
<li>
<img src="ffe27b977dfb30c1854ebc1fdf999c1e.jpg" class="img_item" />
</li>
<li>
<img src="a6189de972494360df2db2140db81e49.jpg" class="img_item" />
</li>
<li>
<img src="b4eee4a4f162745ebb5c0f676b1045ba.jpg" class="img_item" />
</li>
<li>
<img src="dcab10748c31dcfc75f4ba6a36a313fb.jpg" class="img_item" />
</li>
<li>
<img src="f38f0c784dbcb4080f03cf41ed0864b5.jpg" class="img_item" />
</li>
<li>
<img src="ffe27b977dfb30c1854ebc1fdf999c1e.jpg" class="img_item" />
</li>
</ul>
</div>
<script>
var left_btn = document.getElementById("left");
var right_btn = document.getElementById("right");
var ul_box = document.getElementById("ul_box");
var r = 1;
left_btn.onclick = function() {
r = 1;
}
right_btn.onclick = function() {
r = -1;
}
function run() {
ul_box.style.left = ul_box.offsetLeft + r + "px";
if(ul_box.offsetLeft > 0) {
ul_box.style.left = -1000 + "px";
}
if(ul_box.offsetLeft < -1000) {
ul_box.style.left = 0 + "px";
}
}
setInterval(run, 10);
</script>
</body>
</html>