js图片横排无限循环滚动

本文链接：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     width: 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     width: 180px;
33     height: 150px;
34     float: left;
35 }
36 #div1 ul li img{
37     width: 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>
js图片横排无限循环滚动

猜你喜欢
