JS实战——轮播图

　　轮播图在页面中很常见，十分的重要。今天特此练习下。代码如下：
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8" />
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7   <title>轮播图</title>
  8   <style>
  9     * {
 10       padding: 0;
 11       margin: 0;
 12       list-style: none;
 13     }
 14 
 15     #wrapper {
 16        100%;
 17       height: 600px;
 18       position: relative;
 19     }
 20 
 21     #slide {
 22        100%;
 23       height: 600px;
 24     }
 25 
 26     #slide li {
 27        100%;
 28       height: 600px;
 29       opacity: 0;
 30       transition: all .5s;
 31       position: absolute;
 32     }
 33 
 34     #slide .active {
 35       z-index: 10;
 36       opacity: 1;
 37     }
 38 
 39     #slide img {
 40        100%;
 41       height: 600px;
 42     }
 43 
 44     button {
 45        50px;
 46       height: 100px;
 47       font-size: 30px;
 48       position: absolute;
 49       top: 250px;
 50       z-index: 10;
 51     }
 52 
 53     #right-btn {
 54       right: 0;
 55     }
 56 
 57     .point li {
 58        14px;
 59       height: 14px;
 60       background-color: rgba(0, 0, 0, 0.4);
 61       border-radius: 50%;
 62       float: left;
 63       margin-right: 12px;
 64       border: 1px solid rgba(0, 0, 0, 0.4);
 65     }
 66 
 67     .point li.active {
 68       background-color: rgba(255, 255, 255, 0.4);
 69     }
 70 
 71     .point {
 72       position: absolute;
 73       right: 0;
 74       bottom: 2%;
 75       z-index: 100;
 76       margin-right: 20px;
 77     }
 78   </style>
 79 </head>
 80 
 81 <body>
 82   <div id="wrapper">
 83     <ul id="slide">
 84       <li class="active"><img src="./img/1.jpeg" alt="" /></li>
 85       <li><img src="./img/2.jpeg" alt="" /></li>
 86       <li><img src="./img/3.jpeg" alt="" /></li>
 87       <li><img src="./img/4.jpeg" alt="" /></li>
 88       <li><img src="./img/5.jpeg" alt="" /></li>
 89     </ul>
 90     <button id="left-btn">
 91       < </button> <button id="right-btn">>
 92     </button>
 93     <ul class="point">
 94       <li class="active" data-index='0'></li>
 95       <li data-index='1'></li>
 96       <li data-index='2'></li>
 97       <li data-index='3'></li>
 98       <li data-index='4'></li>
 99     </ul>
100   </div>
101   <script>
102     var oLi = document.getElementsByTagName('li')
103     var oLeftBtn = document.getElementById('left-btn')
104     var oRightBtn = document.getElementById('right-btn')
105     var oPoint = document.getElementsByClassName('point')[0]
106     var oPointLi = oPoint.getElementsByTagName('li')
107     var index = 0
108     var time = 0
109     var goIndex = function () {
110       clearIndex()
111       oLi[index].className = 'active'
112       oPointLi[index].className = 'active'
113     }
114 
115     function clearIndex() {
116       for (var i = 0; i < oLi.length; i++) {
117         oLi[i].className = ''
118       }
119       for (var i = 0; i < oPointLi.length; i++) {
120         oPointLi[i].className = ''
121       }
122     }
123 
124     oRightBtn.addEventListener('click', function () {
125       if (index < 4) {
126         index++
127       } else {
128         index = 0
129       }
130       goIndex()
131     })
132 
133     oLeftBtn.addEventListener('click', function () {
134       if (index === 0) {
135         index = 4
136       } else {
137         index--
138       }
139       goIndex()
140     })
141 
142     for (var i = 0; i < oPointLi.length; i++) {
143       oPointLi[i].addEventListener('click', function () {
144         var pointIndex = this.getAttribute('data-index')
145         index = pointIndex
146         goIndex()
147         time = 0
148       })
149     }
150 
151     function autoPlay() {
152       setInterval(function () {
153         time++
154         if (time === 20) {
155           if (index < 4) {
156             index++
157           } else {
158             index = 0
159           }
160           goIndex()
161           time = 0
162         }
163       }, 100)
164     }
165     autoPlay()
166   </script>
167 </body>
168 </html>
　　功能该做的都做了，但代码还不够精简，水平有待提高。哈哈。