基於js和css，跟着網上的視頻教程，結合自己想要的效果，做出了一個類似於淘寶海報的效果。
如圖：淘寶首頁
自己做的：
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lunbo3</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 img{ 18 vertical-align: middle; 19 } 20 .warp{ 21 width: 640px; 22 height: 270px; 23 margin: 0 auto; 24 position: relative; 25 overflow: hidden; 26 } 27 .box{ 28 height: 270px; 29 position: absolute; 30 left: 0px; 31 /*平移過渡動畫，時間為半秒鍾*/ 32 transition: all 0.5s; 33 } 34 .box li{ 35 width: 640px; 36 height: 270px; 37 float: left; 38 } 39 .box li a{ 40 width: 640px; 41 height: 270px; 42 } 43 .box li a img{ 44 width: 100%; 45 height: 100%; 46 cursor: pointer; 47 } 48 .buts span{ 49 color: #FFFFFF; 50 display: none; 51 width: 8px; 52 height: 14px; 53 line-height: 18px; 54 background-color: rgba(0,0,0,0.5); 55 text-align: center; 56 margin: 0 auto; 57 cursor: pointer; 58 -moz-user-select: none; /*火狐*/ 59 -webkit-user-select: none; /*webkit瀏覽器*/ 60 -ms-user-select: none; /*IE10*/ 61 -khtml-user-select: none; /*早期瀏覽器*/ 62 user-select: none; 63 64 }.buts span:hover{ 65 background-color: rgba(0,0,0,0.8); 66 } 67 .buts span img{ 68 display: block; 69 width: 8px; 70 height: 14px; 71 } 72 .butL{ 73 position: absolute; 74 z-index: 100; 75 top: 120px; 76 padding: 10px 10px 10px 5px; 77 border-top-right-radius: 17px; 78 border-bottom-right-radius: 17px; 79 } 80 .butR{ 81 position: absolute; 82 z-index: 100; 83 top: 120px; 84 right: 0; 85 padding: 10px 5px 10px 10px; 86 border-top-left-radius: 17px; 87 border-bottom-left-radius: 17px; 88 } 89 .dotBox{ 90 position: absolute; 91 z-index: 999; 92 bottom: 10px; 93 width: 100%; 94 height: 18px; 95 text-align: center; 96 } 97 .dot{ 98 display: inline-block; 99 margin: 0 auto; 100 height: 8px; 101 padding: 5px; 102 border-radius: 15px; 103 background-color: rgba(255,255,255,0.3); 104 } 105 .dot li{ 106 float: left; 107 width: 8px; 108 height: 8px; 109 line-height: 8px; 110 border-radius: 4px; 111 color: #FFFFFF; 112 text-align: center; 113 margin: 0 4px; 114 background-color: #FFFFFF; 115 cursor: pointer; 116 user-select:none; 117 -moz-user-focus: none; 118 -webkit-user-select: none; 119 -lhtml-user-select:none; 120 -moz-user-select: none; 121 -ms-user-select: none; 122 font-size: 10px; 123 } 124 .dot li:hover{ 125 background-color: #FF0000; 126 } 127 #dotIs{ 128 background-color: #FF0000; 129 } 130 </style> 131 132 </head> 133 <body> 134 <div class="warp"> 135 <!--圖片--> 136 <ul class="box" id="box"> 137 <li><a href="#"><img src="../image/lunbo/00.jpg" /></a></li> 138 <li><a href="#"><img src="../image/lunbo/01.jpg" /></a></li> 139 <li><a href="#"><img src="../image/lunbo/02.jpg" /></a></li> 140 <li><a href="#"><img src="../image/lunbo/03.jpg" /></a></li> 141 <li><a href="#"><img src="../image/lunbo/04.jpg" /></a></li> 142 <li><a href="#"><img src="../image/lunbo/05.jpg" /></a></li> 143 </ul> 144 <!--按鈕--> 145 <div class="buts"> 146 <span class="butL" id="butL"><img src="../image/lunbo/L.png" /></span> 147 <span class="butR" id="butR"><img src="../image/lunbo/R.png" /></span> 148 </div> 149 <!--圓點--> 150 <div class="dotBox"> 151 <ul class="dot" id="dot"> 152 <li id="dotIs"></li> 153 <li></li> 154 <li></li> 155 <li></li> 156 <li></li> 157 <li></li> 158 </ul> 159 </div> 160 </div> 161 162 <script type="text/javascript"> 163 window.onload = function(){ 164 165 //獲取ul（圖片外框） 166 var box = document.getElementById("box"); 167 //獲取li（圖片） 168 var li = box.getElementsByTagName("li"); 169 //獲取單個li寬度（單張圖片寬度） 170 var liWidth = li[0].scrollWidth; 171 //獲取左按鈕 172 var butL = document.getElementById("butL"); 173 //獲取右按鈕 174 var butR = document.getElementById("butR"); 175 //獲取小圓點 176 var dot = document.getElementById("dot").getElementsByTagName("li"); 177 //定義數字 178 var index = 0; 179 //定義開關 180 var flag = true; 181 182 //更改圖片外框寬度（圖片的數量*單張圖片的寬度） 183 box.style.width = li.length*liWidth+"px"; 184 185 //點擊下一張 186 butR.onclick = function(){ 187 //判斷flag是否為true 188 if(flag){ 189 //更改flag為false 190 flag = false; 191 //數字加1 192 index++; 193 //判斷數字是否等於圖片的總數量 194 if(index == li.length){ 195 //將數字改為0 196 index = 0; 197 }; 198 //更改圖片外邊框的left，向左邊移動，移動的尺寸為數字*單張圖片圖片的寬度 199 box.style.left = -index*liWidth+"px"; 200 //遍歷循環查找小圓點下標位置 201 for(var i = 0 ; i < dot.length; i++){ 202 //判斷小圓點的下標位置是否與數字相同 203 if(i == index){ 204 //更改已匹配到li，將已寫好的css樣式id名字賦給它 205 dot[index].id = "dotIs"; 206 }else{ 207 //去掉未匹配的id名字 208 dot[i].id = ""; 209 }; 210 }; 211 //延遲執行，500毫秒之后執行，延遲的時間與css的transition: all 0.5s;的5s一致 212 setTimeout(function(){ 213 //改變flag為true 214 flag = true; 215 },500) 216 }; 217 }; 218 219 //點擊上一張 220 butL.onclick = function(){ 221 //判斷flag是否為true 222 if(flag){ 223 //更改flag為false 224 flag = false; 225 //數字減1 226 index--; 227 //判斷數字是否小於0 228 if(index < 0){ 229 //將數字圖片總數的數字 230 index = li.length-1 231 }; 232 //更改圖片外邊框的left，向右邊移動，移動的尺寸為數字*單張圖片圖片的寬度 233 box.style.left = -index*liWidth+"px"; 234 //遍歷循環查找小圓點下標位置 235 for(var i = 0 ; i < dot.length; i++){ 236 //判斷小圓點的下標位置是否與數字相同 237 if(i == index){ 238 dot[index].id = "dotIs"; 239 //更改已匹配到li，將已寫好的css樣式id名字賦給它 240 }else{ 241 //去掉未匹配的id名字 242 dot[i].id = ""; 243 }; 244 }; 245 //延遲執行，500毫秒之后執行，延遲的時間與css的transition: all 0.5s;的5s一致 246 setTimeout(function(){ 247 //改變flag為true 248 flag = true; 249 },500); 250 }; 251 }; 252 253 //設置自動播放 254 function play(){ 255 //連續不斷持續的執行 256 lunbo = setInterval(function(){ 257 //數字加1 258 index++; 259 //判斷數字是否等於圖片的總數量 260 if(index == li.length){ 261 //將數字改為0 262 index = 0; 263 }; 264 //更改圖片外邊框的left，向左邊移動，移動的尺寸為數字*單張圖片圖片的寬度 265 box.style.left = -index*liWidth+"px"; 266 //遍歷循環查找小圓點下標位置 267 for(var i = 0 ; i < dot.length; i++){ 268 //判斷小圓點的下標位置是否與數字相同 269 if(i == index){ 270 //更改已匹配到li，將已寫好的css樣式id名字賦給它 271 dot[index].id = "dotIs"; 272 }else{ 273 //去掉未匹配的id名字 274 dot[i].id = ""; 275 }; 276 }; 277 //每3000（3秒）執行一次。 278 },3000); 279 }; 280 281 //設置停止自動播放 282 function stop(){ 283 //停止（lunbo）已寫好的持續執行方法。 284 clearTimeout(lunbo); 285 }; 286 287 //默認啟動自動播放 288 play(); 289 290 //點擊圓點 291 for(var i = 0; i < dot.length; i++){ 292 //給每個小圓點賦值，每個小圓點都有一個相對應的數字。 293 dot[i].is = i; 294 //鼠標移入小圓點 295 dot[i].onmouseover = function(){ 296 //停止圖片自動播放 297 stop(); 298 } 299 300 //鼠標移出小圓點 301 dot[i].onmouseout = function(){ 302 //圖片繼續自動播放 303 play(); 304 } 305 306 //點擊小圓點 307 dot[i].onclick = function(){ 308 //更改圖片外邊框的left，向選擇的小圓點移動方向，移動的尺寸為小圓點的數字*單張圖片圖片的寬度 309 box.style.left = -this.is*liWidth+"px"; 310 //循環遍歷小圓點 311 for(var i = 0 ; i < dot.length; i++){ 312 //判斷小圓點的數字是否等於選中的小圓點數字 313 if(i == this.is){ 314 //更改數字（index）等於的小圓點選中的數字 315 index = dot[i].is; 316 //更改已匹配到li，將已寫好的css樣式id名字賦給它 317 dot[this.is].id = "dotIs"; 318 }else{ 319 //去掉未匹配的id名字 320 dot[i].id = ""; 321 }; 322 }; 323 }; 324 }; 325 326 //鼠標移入左按鈕 327 butL.onmouseover = function(){ 328 //停止自動輪播 329 stop(); 330 //左按鈕顯示 331 butL.style.display = "block"; 332 //右按鈕顯示 333 butR.style.display = "block"; 334 }; 335 336 //鼠標移出左按鈕 337 butL.onmouseout = function(){ 338 //繼續自動輪播 339 play(); 340 //左按鈕隱藏 341 butL.style.display = "none"; 342 //右按鈕隱藏 343 butR.style.display = "none"; 344 } 345 346 //鼠標移入右按鈕 347 butR.onmouseover = function(){ 348 //停止自動輪播 349 stop(); 350 //左按鈕顯示 351 butL.style.display = "block"; 352 //右按鈕顯示 353 butR.style.display = "block"; 354 }; 355 356 //鼠標移出右按鈕 357 butR.onmouseout = function(){ 358 //繼續自動輪播 359 play(); 360 //左按鈕隱藏 361 butL.style.display = "none"; 362 //右按鈕隱藏 363 butR.style.display = "none"; 364 } 365 366 //鼠標移入圖片 367 box.onmouseover = function(){ 368 //停止自動輪播 369 stop(); 370 //左按鈕顯示 371 butL.style.display = "block"; 372 //右按鈕顯示 373 butR.style.display = "block"; 374 }; 375 376 //鼠標移出圖片 377 box.onmouseout = function(){ 378 //繼續自動輪播 379 play(); 380 //左按鈕隱藏 381 butL.style.display = "none"; 382 //右按鈕隱藏 383 butR.style.display = "none"; 384 } 385 386 } 387 </script> 388 </body> 389 </html>
未經允許，禁止轉載，抄襲，如需借鑒參考等，請附上該文章連接。