轮播图在页面中很常见，十分的重要。今天特此练习下。代码如下：
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>
功能该做的都做了，但代码还不够精简，水平有待提高。哈哈。