<!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>