1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .banner { 13 width: 100%; 14 height: 450px; 15 background: #999; 16 position: relative; 17 } 18 19 .cont { 20 width: 100%; 21 height: 100%; 22 line-height: 450px; 23 text-align: center; 24 display: none; 25 color: #f00; 26 } 27 28 .tip { 29 width: 120px; 30 bottom: 50px; 31 left: 50%; 32 margin-left: -60px; 33 position: absolute; 34 } 35 36 .tip ul { 37 width: 120px; 38 margin: 0 auto; 39 text-align: center; 40 } 41 42 .tip ul li { 43 margin: 0; 44 width: 20px; 45 height: 20px; 46 text-align: center; 47 line-height: 20px; 48 background: #ccc; 49 margin: 0 5px; 50 list-style: none; 51 display: inline-block; 52 } 53 54 .active { 55 color: #fff; 56 background: #f00 !important; 57 } 58 59 .pre, .next { 60 position: absolute; 61 top: 50%; 62 margin-top: -50px; 63 width: 40px; 64 height: 80px; 65 line-height: 80px; 66 text-align: center; 67 background: #ccc; 68 } 69 70 .pre { 71 left: 0; 72 } 73 74 .next { 75 right: 0; 76 } 77 </style> 78 </head> 79 <body> 80 <div class="banner" id="box"> 81 <div class="main" id="main"> 82 <div class="cont" style="display: block">第一张</div> 83 <div class="cont" style="background:#666">第二张</div> 84 <div class="cont" style="background:#171717">第三张</div> 85 <div class="cont" style="background:#424242">第四张</div> 86 </div> 87 <div class="tip" id="tip"> 88 <ul> 89 <li class="active">1</li> 90 <li>2</li> 91 <li>3</li> 92 <li>4</li> 93 </ul> 94 </div> 95 <div class="slide"> 96 <div class="pre" id="pre">左</div> 97 <div class="next" id="next">右</div> 98 </div> 99 </div> 100 </body> 101 <script> 102 window.onload = function () { 103 var oCont = document.getElementsByClassName('cont'); 104 var oLi = document.getElementsByTagName('li'); 105 var oPre = document.getElementById('pre'); 106 var oNext = document.getElementById('next'); 107 108 var index = 0; 109 var timer = ''; 110 111 //左边切换 112 oPre.onclick = function () { 113 index--; 114 if (index == '-1') { 115 index = oCont.length - 1; 116 } 117 ; 118 119 for (var i = 0; i < oCont.length; i++) { 120 oLi[i].className = ''; 121 oCont[i].style.display = 'none' 122 } 123 oLi[index].className = 'active'; 124 oCont[index].style.display = 'block'; 125 }; 126 127 //右边切换 128 oNext.onclick = function () { 129 130 index++; 131 if (index == oCont.length) { 132 index = 0; 133 } 134 for (var i = 0; i < oCont.length; i++) { 135 oLi[i].className = ''; 136 oCont[i].style.display = 'none' 137 } 138 oLi[index].className = 'active'; 139 oCont[index].style.display = 'block'; 140 }; 141 142 143 //点击数字切换内容 144 for (var i = 0; i < oLi.length; i++) { 145 oLi[i].index = i; 146 oLi[i].onclick = function () { 147 for (var i = 0; i < oLi.length; i++) { 148 oLi[i].className = ''; 149 oCont[i].style.display = 'none'; 150 } 151 for (var i = 0; i <= this.index; i++) { 152 this.className = 'active'; 153 oCont[this.index].style.display = 'block'; 154 index = i; 155 } 156 } 157 } 158 159 160 timer = setInterval(move, 1500); 161 162 box.onmouseout = function () { 163 clearInterval(timer); 164 timer = setInterval(move, 1500); 165 }; 166 167 box.onmouseover = function () { 168 clearInterval(timer); 169 }; 170 171 function move() { 172 index++; 173 if (index == oCont.length) { 174 index = 0; 175 } 176 for (var i = 0; i < oCont.length; i++) { 177 oLi[i].className = ''; 178 oCont[i].style.display = 'none' 179 } 180 oLi[index].className = 'active'; 181 oCont[index].style.display = 'block'; 182 } 183 184 }; 185 </script> 186 187 </html>
轮播图的大致原理就是，通过JS来判断当前应该显示图片数组中的哪一张图片。
将所需要展示的图片（.cont）通过JS获取为数组，并判断用户当前点击的是分页器的哪一页，或点击的是切页按钮。
然后为当前应活跃的图片添加display:block属性，并将其他图片隐藏（display:none）。
给分页器的当前页数添加class="active"属性来标识当前活跃页码。
并最终添加循环器（setInterval）来使页面进行轮播，最终完成轮播图的效果。
注：可若添加轮播特效。