<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box {width:200px; height:200px; background:red; position:absolute; top:100px; left:500px;} </style> </head> <body> <div id="box"> </div> <br /> <button>向右滑动</button> <button>向左滑动</button> <button>stop</button> <script type="text/javascript"> var box = document.getElementById('box'); var btns = document.getElementsByTagName('button'); var t1 = null; //定义一个变量，表示定时器 //右滑 btns[0].onclick = function(){ clearInterval(t1); //需要先清除定时器 t1 = setInterval(function(){ var x = box.offsetLeft; //获取当前box相对于body的位置 box.style.left = x + 5 + "px"; },50); } //左滑 btns[1].onclick = function(){ clearInterval(t1); //需要先清除定时器 t1 = setInterval(function(){ var x = box.offsetLeft; //获取当前box相对于body的位置 box.style.left = x - 5 + "px"; },50); } //stop btns[2].onclick = function(){ clearInterval(t1); } </script> </body> </html>