javascript編寫的一個完整全方位輪播圖效果
阿新 • • 發佈：2019-03-12
等於 function tin script :hover click otto margin pla
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9<style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 #box { 16 position: relative; 17 width: 1000px; 18 height: 358px; 19 margin: 100px auto; 20 } 21 22 #left {23 background-image: url("images/shutter_prevBtn.png"); 24 display: inline-block; 25 z-index: 5; 26 width: 50px; 27 height: 50px; 28 position: absolute; 29 left: 0; 30 top: 50%; 31 margin-top: -25px;32 } 33 34 #left:hover { 35 background-position: 0 -48px; 36 } 37 38 #right { 39 background-image: url("images/shutter_prevBtn.png"); 40 display: inline-block; 41 z-index: 5; 42 width: 50px; 43 height: 50px; 44 position: absolute; 45 right: 0; 46 transform: rotate(180deg); 47 top: 50%; 48 margin-top: -25px; 49 } 50 51 #right:hover { 52 background-position: 0 -48px; 53 } 54 55 #box1 { 56 width: 200px; 57 position: absolute; 58 bottom: 0px; 59 right: 50%; 60 margin-right: -100px; 61 display: flex; 62 justify-content: space-between; 63 } 64 65 span { 66 display: inline-block; 67 width: 20px; 68 height: 20px; 69 background: white; 70 border-radius: 50%; 71 } 72 </style> 73 </head> 74 75 <body> 76 <div id="box"> 77 <img src="images/shutter_1.jpg" > 78 <i id="left"></i> 79 <i id="right"></i> 80 <div id="box1"> 81 <span></span> 82 <span></span> 83 <span></span> 84 <span></span> 85 </div> 86 </div> 87 <script> 88 let a = 0, timer; 89 let img = document.querySelector("img"); 90 let span = document.querySelectorAll("span"); 91 let arr = [‘images/shutter_1.jpg‘, ‘images/shutter_2.jpg‘, ‘images/shutter_3.jpg‘, ‘images/shutter_4.jpg‘]; 92 function off(num) {//如果a==i那就改變它的顏色，其它不等於那麽就 變成白色； 93 for (let i = 0; i < span.length; i++) { 94 if (i == num) { 95 span[i].style["background"] = "red"; 96 } else { 97 span[i].style["background"] = "white"; 98 } 99 } 100 } 101 function off1() {//間隔性函數封裝 102 timer = setInterval(function () { 103 off(a);//調用函數 104 a++; 105 if (a > arr.length - 1) {//如果a大於了數組的下標減1，那麽就進入循環恢復a==0； 106 a = 0; 107 } 108 img.src = arr[a]; 109 }, 1000); 110 } 111 function left1() {//調用左邊按鈕封裝函數 112 left.onmouseover = function () { 113 clearInterval(timer); 114 left.onclick = function () { 115 off(a); 116 a--; 117 if (a < 0) { 118 a = arr.length - 1; 119 } 120 img.src = arr[a]; 121 } 122 } 123 left.onmouseout = function () { 124 off1(); 125 } 126 } 127 function right1() {//調用右邊按鈕封裝函數 128 right.onmouseover = function () { 129 clearInterval(timer); 130 right.onclick = function () { 131 off(a); 132 a++; 133 if (a >= arr.length) { 134 a = 0; 135 } 136 img.src = arr[a]; 137 } 138 } 139 right.onmouseout = function () { 140 off1(); 141 } 142 } 143 function span1() {//調用span圓點封裝函數 144 for (let i = 0; i < span.length; i++) { 145 span[i].onmouseover = function () { 146 clearInterval(timer); 147 a = i; 148 img.src = arr[a]; 149 off(a); 150 } 151 span[i].onmouseout = function () { 152 off1(); 153 } 154 } 155 } 156 off1();//這調用封裝函數來實現間隔性 157 left1();//調用左邊按鈕封裝函數 158 right1();//調用右邊按鈕封裝函數 159 span1();//調用span圓點封裝函數 160 </script> 161 </body> 162 163 </html> 164
javascript編寫的一個完整全方位輪播圖效果