<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style> *{margin: 0;padding: 0;} #div1{ position: relative;border: 1px solid gray; 100%; margin: 20px auto; height: 800px; overflow: hidden; } #div1 ul{ position: absolute; left: 0; } #div1 a{ position: absolute; z-index: 2; text-decoration: none; top: 45%; display: none; } #div1 ul li{ padding: 5px; list-style: none; 720px; height: 100%; float: left; } #div1 ul li img{ 100%; height: 100%; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aA = oDiv.getElementsByTagName('a'); var iSpeed = 1;//正左负右 var timer = null; //计算ul的宽为所有li的宽的和; oUl.innerHTML += oUl.innerHTML+oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length+'px'; function Slider(){ if (oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left = 0; }else if(oUl.offsetLeft>0){ oUl.style.left =-oUl.offsetWidth/2+'px'; } oUl.style.left = oUl.offsetLeft-iSpeed+'px';//正负为方向 } timer =setInterval(Slider,30); aA[0].onclick = function(){ iSpeed = 1; //控制速度的正负 } aA[1].onclick = function(){ iSpeed = -1; } oDiv.onmouseover = function(){ clearInterval(timer); } oDiv.onmouseout = function(){ timer =setInterval(Slider,30); } }; </script> <div id="div1"> <ul> <li><img src="http://192.168.0.239/disk/jx/1.jpg"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> <li><img src="img/5.png"></li> </ul> <a href="javascript:;" style="left:10px;"><</a> <a href="javascript:;" style="right:10px;">></a> </div> </body> </html>