本文链接：https://blog.csdn.net/a772116804/article/details/80283025
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>js</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 8 user-scalable=no"/> 9 <style> 10 *{margin: 0;padding: 0;} 11 #div1{ 12 position: relative;border: 1px solid gray; 13 760px; 14 margin: 20px auto; 15 height: 160px; 16 overflow: hidden; 17 } 18 #div1 ul{ 19 position: absolute; 20 left: 0; 21 } 22 #div1 a{ 23 position: absolute; 24 z-index: 2; 25 text-decoration: none; 26 top: 45%; 27 display: none; 28 } 29 #div1 ul li{ 30 padding: 5px; 31 list-style: none; 32 180px; 33 height: 150px; 34 float: left; 35 } 36 #div1 ul li img{ 37 100%; 38 height: 100%; 39 } 40 </style> 41 </head> 42 <body> 43 <script type="text/javascript"> 44 window.onload = function(){ 45 var oDiv = document.getElementById('div1'); 46 var oUl = oDiv.getElementsByTagName('ul')[0]; 47 var aLi = oUl.getElementsByTagName('li'); 48 var aA = oDiv.getElementsByTagName('a'); 49 var iSpeed = 1;//正左负右 50 var timer = null; 51 //计算ul的宽为所有li的宽的和; 52 oUl.innerHTML += oUl.innerHTML+oUl.innerHTML; 53 oUl.style.width = aLi[0].offsetWidth*aLi.length+'px'; 54 function Slider(){ 55 if (oUl.offsetLeft<-oUl.offsetWidth/2) { 56 oUl.style.left = 0; 57 }else if(oUl.offsetLeft>0){ 58 oUl.style.left =-oUl.offsetWidth/2+'px'; 59 } 60 oUl.style.left = oUl.offsetLeft-iSpeed+'px';//正负为方向 61 } 62 timer =setInterval(Slider,30); 63 aA[0].onclick = function(){ 64 iSpeed = 1; //控制速度的正负 65 } 66 aA[1].onclick = function(){ 67 iSpeed = -1; 68 } 69 oDiv.onmouseover = function(){ 70 clearInterval(timer); 71 } 72 oDiv.onmouseout = function(){ 73 timer =setInterval(Slider,30); 74 } 75 }; 76 </script> 77 <div id="div1"> 78 <ul> 79 <li><img src="img/2.jpg"></li> 80 <li><img src="img/3.jpg"></li> 81 <li><img src="img/4.jpg"></li> 82 <li><img src="img/5.jpg"></li> 83 </ul> 84 <a href="javascript:;" style="left:10px;"><</a> 85 <a href="javascript:;" style="right:10px;">></a> 86 </div> 87 </body> 88 </html>