大概是這個樣子：
首先來簡單布局一下（emm...隨便弄一下吧，反正主要是用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 <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>
下邊來進入主要部分
其實主要就是影片函式的封裝以及對陣列的改變
影片函式部分的注釋，博主的上一篇博客有寫：原生JS實作影片函式的封裝，這里就不重復啦~
將圖片相關樣式（大小、定位、透明度等）存放到arr陣列里，
當用戶點擊左右箭頭時，讓陣列進行相應變化（如果點擊右箭頭，就洗掉陣列最后那個元素，把它添加到最前邊；如果點擊左箭頭，就洗掉陣列最前邊那個元素，把它添加到最后邊），改變完陣列再呼叫一下move()函式（讓圖片輪播）
詳細代碼如下
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 // 滑鼠移入移出箭頭顯示隱藏 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節流閥 為了解決點擊過快而產生bug 55 move(); // 先呼叫一下，為了剛打開瀏覽器時渲染頁面 56 57 // 點擊左右箭頭輪播圖片 58 arrow_r.addEventListener("click", function() { 59 if(flag) { 60 flag = false; // 關閉節流閥 等到影片結束了才能繼續執行點擊操作 61 arr.unshift(arr.pop()); // 將陣列最后邊的元素洗掉，添加到最前邊 62 move(); // 輪播圖片 63 } 64 }); 65 arrow_l.addEventListener("click", function() { 66 if(flag) { 67 flag = false; 68 arr.push(arr.shift()); // 將陣列最前邊的元素洗掉，添加到最后邊 69 move(); 70 } 71 }); 72 73 // 讓每個圖片執行影片 74 function move() { 75 for(var i = 0; i < lis.length; i++) { 76 animate(lis[i], arr[i], function() { 77 flag = true; // 回呼函式，當影片執行完 再把節流閥打開 78 }); 79 } 80 } 81 // 影片函式 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 // 獲取屬性函式 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 });
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/159521.html
標籤：JavaScript