原生JS轮播图

当前位置:
首页 > temp > JavaScript教程 >

原生JS轮播图
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>轮播图</title>
  6 </head>
  7 <style>
  8     *{
  9         margin:0px;
 10         padding:0px;
 11     }
 12 
 13     li{
 14         list-style: none;   /*取消li默认的前缀*/
 15     }
 16 
 17     img{
 18         display: block;     /*解决图片之间3px的问题*/
 19     }
 20 
 21     /*用一个容器包裹起来*/
 22     #container{         
 23         position: relative;
 24         margin: 0 auto;
 25         margin-top: 130px;
 26         width: 750px;
 27         height: 352px;
 28         border: 1px solid #ccc;
 29     }
 30 
 31     /*隐藏掉容器所有的图片*/
 32     #container>ul>li{
 33        position:absolute; 
 34        display: none;
 35 
 36     }
 37 
 38     /*显示容器中的图片active属性的那张*/
 39     #container>ul>li.active{
 40         display: block;
 41     }
 42     
 43     #buttons{
 44         position: absolute;
 45         width: 180px;
 46         height: 20px;
 47         bottom: 20px;
 48         left: 50%;
 49         margin-left: -90px;
 50         border-radius: 20px;
 51         background-color:rgba(255, 255, 255, 0.2);
 52     }
 53 
 54     /*弹性盒子*/
 55     #buttons>ul{
 56         width: 100%;
 57         height: 100%;
 58         display: flex;
 59         align-items: center;            /*垂直方向居中*/
 60         justify-content:space-around;   /*水平方向居中*/
 61     }
 62 
 63     #buttons>ul>li{
 64         width: 20px;
 65         height: 20px;
 66         border-radius: 50%;
 67         text-align: center;
 68         background-color: #FFF;
 69     }
 70 
 71     #buttons>ul>li.active_butto{
 72         background-color: #DB192A;
 73     }

 74     #container>.arrow{
 75         position: absolute;
 76         width: 30px;
 77         height: 60px;
 78         top: 50%;
 79         margin-top: -30px;
 80         font-size: 30px;
 81         line-height: 60px;
 82         text-align: center;
 83         background-color: rgba(0, 0, 0, 0.1);
 84         user-select: none;                  /*禁止选中文字(多次点击箭头会选中箭头)*/
 85     }

 86     #container>.arrow:hover{
 87         background: rgba(0, 0, 0, 0.5);
 88         cursor: pointer;
 89     }

 90     #container>#left{
 91         left: 0px;
 92     }

 93     #container>#right{
 94         right: 0px;
 95     }
 96     
 97 </style>
 98 <body>
 99     <div id="container">
100         <!-- 图片 -->
101         <ul>
102             <li class="active"><img src="./1.jpg" alt="1"></li>
103             <li><img src="./2.jpg" alt="2"></li>
104             <li><img src="./3.jpg" alt="3"></li>
105             <li><img src="./4.jpg" alt="4"></li>
106             <li><img src="./5.jpg" alt="5"></li>
107         </ul>           
108         <!-- 圆点 -->
109         <div id="buttons">
110             <ul>
111                 <li class="active_butto">1</li>
112                 <li>2</li>
113                 <li>3</li>
114                 <li>4</li>
115                 <li>5</li>
116             </ul>
117         </div>
118         <!-- 箭头 -->
119         <span id="left" class="arrow">&lt;</span>
120         <span id="right" class="arrow">&gt;</span>
121     </div>
122 <script>
123     var container = document.getElementById("container"); /* 获取元素*/
124     var bList = document.getElementById("buttons");
125     var left = document.getElementById("left");
126     var right = document.getElementById("right");
127     var lis = container.children[0].children;             /* .children查找该元素的所有子类,返回的是类数组*/
128     var blis = bList.children[0].children;
129     var len = lis.length;
130     var index = 0;  
131     var timer;  
132     var next = function() {
133         lis[index].removeAttribute("class");                            /*移除属性*/
134             blis[index].removeAttribute("class");                       /*移除属性*/
135             index++;                                                    /*设置标志*/
136             if(index == len){
137                 index = 0;
138             }                    
139             lis[index].setAttribute("class", "active");                 /*添加属性*/ 
140             blis[index].setAttribute("class", "active_butto");          /*添加属性*/ 
141     }                                   
142     var autoPlay = function() {
143             timer = setInterval(function() { 
144             next();           
145         },2000);
146     }
147     autoPlay();
148     container.onmouseenter = function() {
149         clearInterval(timer);
150     }
151     container.onmouseleave = function() {
152         autoPlay();
153     }
154     for(var i = 0; i < blis.length; i++) {
155         blis[i].onmouseover = (function(i) {              /*使用闭包解决函数循环先执行导致i一直是数组的length-1的问题*/
156             return function() {                             
157                 lis[index].removeAttribute("class");                    /*移除属性*/
158                 blis[index].removeAttribute("class");
159                 index = i;
160                 lis[index].setAttribute("class", "active");             /*添加属性*/ 
161                 blis[index].setAttribute("class", "active_butto");
162             };
163         })(i);
164     }
165     left.onclick = function() {
166         lis[index].removeAttribute("class");              /*移除属性*/
167         blis[index].removeAttribute("class");
168         index--;
169         if(index < 0){
170                 index = blis.length - 1;
171         }                    
172         lis[index].setAttribute("class", "active");       /*添加属性*/ 
173         blis[index].setAttribute("class", "active_butto");       /*添加属性*/ 
174     }
175     right.onclick = function() {
176         next();
177     }
178 </script>
179 </body>
180 </html>
栏目列表