代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script type="text/javascript" src="js/common.js"></script> <style type="text/css"> body,div,ul,li,img{padding:0;margin:0;} #main{width:800px;height:200px; border:1px solid #666; margin:0px auto; position:relative;overflow: hidden;} #main ul{position:absolute; left:0;} #main li{list-style: none;float:left; } #top{width:800px; text-align: center;margin:50px auto 0px;} </style> <script type="text/javascript"> window.onload = function(){ var main = $('main'); var speed = -3; var oUl = main.getElementsByTagName('ul')[0]; var aLeft = $('top').getElementsByTagName('a')[0]; var aRight = $('top').getElementsByTagName('a')[1]; oUl.style.width = oUl.clientWidth*2 + 'px'; oUl.innerHTML += oUl.innerHTML; //向左移动 var timer = setInterval(move,30); //点击向左的时候，减去3px aLeft.onclick = function(){ speed = -3; } //点击向右的时候,加上3px aRight.onclick = function(){ speed = 3; } //鼠标 main.onmouseover = function(){ clearInterval(timer); } main.onmouseout = function(){ clearInterval(timer); timer = setInterval(move,30); } function move(){ if (oUl.offsetLeft < -main.clientWidth) { oUl.style.left = 0; } else if(oUl.offsetLeft >= 0) { oUl.style.left = -main.clientWidth + 'px'; } oUl.style.left = oUl.offsetLeft + speed + 'px'; } } </script> </head> <body> <div id="top"> <a href="javascript:;">向左</a> <a href="javascript:;">向右</a> </div> <div id="main"> <ul> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> </div> </body> </html>
common.js
function $(id){
return document.getElementById(id);
}