原生JS简易轮播

页面效果

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 <style> 
     img{ width: 200px; height:200px;}
		.div{ width: 200px; margin: 10px auto;}
		.box{ width: 880px; 
           margin: 10px auto; 
           height:240px; 
           overflow: hidden;
		      border-top:10px solid #000;
           border-bottom:10px solid #000 ;
           position: relative;
		 }
		 ul{height: 200px; overflow: hidden;padding: 10px 0; position: absolute;top: 0;left: 0;}
		 li{width: 200px; height: 200px; padding: 0 10px; float: left;list-style: none;}
 </style>
 <div class="box" id="box">
		<ul>
			<li><a href="JavaScript:;"><img src="../img1/0.jpg"/></a></li>
			<li><a href="JavaScript:;"><img src="../img1/1.jpg"/></a></li>
			<li><a href="JavaScript:;"><img src="../img1/2.jpg"/></a></li>
			<li><a href="JavaScript:;"><img src="../img1/3.jpg"/></a></li>
		</ul>
</div>
 <script>
     var btn_ting = document.getElementById('ting');
     var btn_you = document.getElementById('you');
     var btn_zuo = document.getElementById('zuo');
       
     window.onload=function(){
			     var oBox = document.getElementById('box');
			     var oul = oBox.children[0];
			     var aLi = oBox.getElementsByTagName('li');
            var n = 0;
            var timer = null;
            oul.innerHTML+=oul.innerHTML; //复制一份
            oul.style.width=aLi[0].offsetWidth*aLi.length + 'px';
           //向左走
           btn_zuo.onclick =function(){
               clearInterval(timer)
               var w =oul.offsetWidth/2;
               timer=setInterval(function(){
                 n-=5;
                 oul.style.left = (n%w-w)%w +'px';
               },30);
           }
           
           //向右走
           btn_you.onclick=function(){
              clearInterval(timer)
              kap();
           }
           
           //停止滚动
           btn_ting.onclick=function(){
             clearInterval(timer)
           }
           
           //滚动函数
           function kap(){
             var w = oul.offsetWidth/2;
             timer=setInterval(function(){
               n+=5;
               oul.style.left=(n%w-w)%w +'px';
             },30);
           }
			    
           //悬浮停止滚动
           oBox.onmouseenter = function(){
             clearInterval(timer);
           };
           
           //离开开始滚动
           oBox.onmouseleave = function(){
             clearTimeout(timer);
             timer=setTimeout(function(){
                kap();
             },3000)
           };
		}
 </script>
【页面效果】, 原生JS简易轮播