首页 > > 网页制作 > Javascript >

js原生轮播

2018-06-24 01:25:29来源：未知阅读 ()

js原生轮播

　　今天用js做了轮播图，做的不怎么好，希望大家能够看懂。

效果：

　　1.鼠标放在轮播图上自动停止

　　2.鼠标离开轮播图自动播放

　　3.鼠标点击轮播图上的小圆点跳转到相应的图上。

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js轮播</title>
 6     <style type="text/css" media="screen">
 7         *{margin: 0;padding: 0;}
 8         body{width: 100%}
 9         ul{width: 100%;height: 500px;list-style: none;position: relative;overflow: hidden}
10         ul li {float: left;width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;line-height: 500px;font-size: 40px;font-weight: bold;background: red;z-index: 0;opacity: 0}
11         ul li:nth-child(2){background: yellow}
12         ul li:nth-child(3){background: pink}
13         .anbox{position: absolute;z-index: 999;left: 50%;top: 90%;transform: translate(-50%, 0);}
14         .an{width: 20px;height: 20px;background: white;float: left;margin-left: 20px;border-radius: 50%;opacity: 0.6}
15         .an:nth-child(1){margin: 0;}
16     </style>
17 </head>
18 <body>
19     <ul>
20         <li>1</li>
21         <li>2</li>
22         <li>3</li>
23         <div class="anbox">
24             <div class="an"></div>
25             <div class="an"></div>
26             <div class="an"></div>
27         </div>
28     </ul>
29     <script src="js/c.js"></script>
30     <script>
31         $tag('body')[0].onload = aa;
32         var yuans = $class('an');
33         var lis = $tag('li');
34         var ul = $tag('ul')[0];
35         var b = 1;//控制图片和小圆点的下标值;
36 
37         // 轮播
38         function aa(){
39             reset();
40             lis[b-1].style.zIndex = b;
41             lis[b-1].style.transition = 1+'s';
42             lis[b-1].style.opacity = 1;
43             yuans[b-1].style.background = $random255();
44             yuans[b-1].style.opacity = 1;
45             b++;
46             if(b==lis.length+1){//重置b值
47                 b=1;
48             }
49         }
50         // 鼠标放上去
51         var time =setInterval(aa,2000);
52         ul.onmousemove = ting;
53         function ting(){
54             clearInterval(time);
55         }
56         ul.onmouseout = function(){
57             ting = null;
58             time =setInterval(aa,2000);
59         }
60 
61         //鼠标放在小圆点的时候
62         for(var x=0;x<yuans.length;x++){
63             yuans[x].onclick = yuan;
64             yuans[x].value = x;
65         }
66         function yuan(){
67             var i = this.value;
68             reset();
69             lis[i].style.zIndex =4;
70             lis[i].style.opacity = 1;
71             yuans[i].style.background = $random255();
72         }
73 
74         //点击上一个或者下一个
75         var page = $class('tag');
76         for(var x of page){
77             x.onclick = pages;
78         }
79         function pages(){
80             if(this.id == 'left'){
81                 font();
82             }
83         }
84         function reset(){                //小圆点和图全部还原
85             for(var j=0;j<lis.length;j++){
86                 lis[j].style.zIndex = 0;
87                 lis[j].style.opacity = 0;
88                 yuans[j].style.background = "white";
89                 yuans[j].style.opacity = 0.6;
90             }
91         }
92     </script>
93 </body>
94 </html>