|
大概是這個(gè)樣子：
首先來(lái)簡(jiǎn)單布局一下（emm...隨便弄一下吧，反正主要是用js來(lái)整的） 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>旋轉(zhuǎn)木馬輪播圖</title> 8 <script src="js/index.js"></script> 9 <style>10 * {11 margin: 0;12 padding: 0;13 }14 ul, li {15 list-style: none;16 }17 .wrap {18 margin: 0 auto;19 width: 1050px;20 }21 .slider {22 position: relative;23 margin: 50px auto;24 height: 400px;25 }26 .slider li {27 position: absolute;28 }29 .slider li img {30 width: 100%;31 }32 .slider .arrow-l,33 .slider .arrow-r{34 position: absolute;35 top: 0;36 display: none;37 width: 80px;38 height: 400px;39 background-size: 80px;40 cursor: pointer;41 opacity: 0.8;42 z-index: 99;43 }44 .arrow-r {45 right: 80px;46 background: url(img/next.png) no-repeat 0;47 }48 .arrow-l {49 left: 80px;50 background: url(img/prev.png) no-repeat 0;51 }52 </style>53 </head>54 <body>55 <div class="wrap">56 <div class="slider">57 <ul>58 <li><img src="img/img1.jpg" alt=""></li>59 <li><img src="img/img2.jpg" alt=""></li>60 <li><img src="img/img3.jpg" alt=""></li>61 <li><img src="img/img4.jpg" alt=""></li>62 <li><img src="img/img5.jpg" alt=""></li>63 </ul>64 <div class="arrows">65 <i class="arrow arrow-l"></i>66 <i class="arrow arrow-r"></i>67 </div>68 </div>69 </div>70 </body>71 </html> 下邊來(lái)進(jìn)入主要部分 其實(shí)主要就是動(dòng)畫函數(shù)的封裝以及對(duì)數(shù)組的改變 動(dòng)畫函數(shù)部分的注釋,，博主的上一篇博客有寫：原生JS實(shí)現(xiàn)動(dòng)畫函數(shù)的封裝,。這里就不重復(fù)啦~ 將圖片相關(guān)樣式（大小、定位,、透明度等）存放到arr數(shù)組里,。 當(dāng)用戶點(diǎn)擊左右箭頭時(shí)，讓數(shù)組進(jìn)行相應(yīng)變化（如果點(diǎn)擊右箭頭,，就刪除數(shù)組最后那個(gè)元素,，把它添加到最前邊；如果點(diǎn)擊左箭頭,，就刪除數(shù)組最前邊那個(gè)元素,，把它添加到最后邊），改變完數(shù)組再調(diào)用一下move()函數(shù)（讓圖片輪播） 詳細(xì)代碼如下 1 window.addEventListener("load", function() { 2 var arr = [ 3 { // 1 4 width: 450, 5 top: 60, 6 left: 0, 7 opacity: 40, 8 zIndex: 2 9 }, 10 { // 2 11 width: 550, 12 top: 30, 13 left: 100, 14 opacity: 70, 15 zIndex: 3 16 }, 17 { // 3 中間圖片 18 width: 650, 19 top: 0, 20 left: 200, 21 opacity: 100, 22 zIndex: 4 23 }, 24 { // 4 25 width: 550, 26 top: 30, 27 left: 400, 28 opacity: 70, 29 zIndex: 3 30 }, 31 { // 5 32 width: 450, 33 top: 60, 34 left: 600, 35 opacity: 40, 36 zIndex: 2 37 } 38 ]; 39 var slider = document.querySelector(".slider"); 40 var lis = slider.querySelectorAll("li"); 41 var arrow_l = slider.querySelector(".arrow-l"); 42 var arrow_r = slider.querySelector(".arrow-r"); 43 44 // 鼠標(biāo)移入移出箭頭顯示隱藏 45 slider.addEventListener("mouseover", function() { 46 arrow_l.style.display = 'block'; 47 arrow_r.style.display = 'block'; 48 }); 49 slider.addEventListener("mouseout", function() { 50 arrow_l.style.display = 'none'; 51 arrow_r.style.display = 'none'; 52 }); 53 54 var flag = true; // flag節(jié)流閥 為了解決點(diǎn)擊過(guò)快而產(chǎn)生bug 55 move(); // 先調(diào)用一下,，為了剛打開(kāi)瀏覽器時(shí)渲染頁(yè)面 56 57 // 點(diǎn)擊左右箭頭輪播圖片 58 arrow_r.addEventListener("click", function() { 59 if(flag) { 60 flag = false; // 關(guān)閉節(jié)流閥 等到動(dòng)畫結(jié)束了才能繼續(xù)執(zhí)行點(diǎn)擊操作 61 arr.unshift(arr.pop()); // 將數(shù)組最后邊的元素刪除,，添加到最前邊 62 move(); // 輪播圖片 63 } 64 }); 65 arrow_l.addEventListener("click", function() { 66 if(flag) { 67 flag = false; 68 arr.push(arr.shift()); // 將數(shù)組最前邊的元素刪除，添加到最后邊 69 move(); 70 } 71 }); 72 73 // 讓每個(gè)圖片執(zhí)行動(dòng)畫 74 function move() { 75 for(var i = 0; i < lis.length; i++) { 76 animate(lis[i], arr[i], function() { 77 flag = true; // 回調(diào)函數(shù),，當(dāng)動(dòng)畫執(zhí)行完 再把節(jié)流閥打開(kāi) 78 }); 79 } 80 } 81 // 動(dòng)畫函數(shù) 82 function animate(obj, json, callback) { 83 clearInterval(obj.timer); 84 obj.timer = setInterval(function() { 85 var bool = true; 86 for(var attr in json) { 87 var icur = 0; 88 if(attr == 'opacity') { 89 icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); 90 } else { 91 icur = parseInt(getStyle(obj, attr)); 92 } 93 var speed = (json[attr] - icur) / 10; 94 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 95 if(icur != json[attr]) { 96 bool = false; 97 } 98 if(attr == 'opacity') { 99 obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')';100 obj.style.opacity = (icur + speed) / 100;101 } else if(attr == 'zIndex') {102 obj.style.zIndex = json[attr];103 } else {104 obj.style[attr] = icur + speed + 'px';105 }106 }107 if(bool) {108 clearInterval(obj.timer);109 callback && callback();110 }111 },15);112 }113 // 獲取屬性函數(shù) 114 function getStyle(obj, attr) {115 if(obj.currentStyle){ //IE瀏覽器116 return obj.currentStyle[attr];117 }else{ //chrome,、firefox等瀏覽器118 return getComputedStyle(obj,null)[attr];119 }120 }121 }); |
|
|
