JavaScript--緩動運動+輪播圖
阿新 • • 發佈：2017-10-21
classname ima javascrip ive margin pla tom append mouse
上效果：
實現步驟：
最重要的是運動公式！！！
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>總有人比你富有，卻比你更聰明更努力！</title> 6 <style type="text/css"> 7 /* css 重置 */ 8 * { 9 margin: 0; 10 padding: 0;11 list-style: none; 12 } 13 14 body { 15 background: #fff; 16 font: normal 12px/22px 宋體; 17 } 18 19 img { 20 border: 0; 21 } 22 23 a { 24 text-decoration: none; 25color: #333; 26 } 27 28 /* 本例子css */ 29 .slideBox { 30 width: 790px; 31 height: 340px; 32 overflow: hidden; 33 position: relative; 34 border: 1px solid #ddd; 35 margin: 50px auto;36 } 37 38 .bd .hd { 39 height: 20px; 40 /*overflow: hidden;*/ 41 position: absolute; 42 right: 5px; 43 bottom: 5px; 44 z-index: 1; 45 width: 16%; 46 } 47 48 .bd .hd ul { 49 /*overflow: hidden;*/ 50 zoom: 1; 51 float: left!important; 52 } 53 54 .bd .hd ul li { 55 margin-right: 5px!important; 56 width: 20px; 57 height: 20px; 58 line-height: 20px; 59 font-weight: bold; 60 text-align: center; 61 background: #fff; 62 cursor: pointer; 63 border-radius: 50%; 64 float: left; 65 66 } 67 68 .bd .hd ul li.on { 69 background: #f00; 70 color: #fff; 71 72 } 73 74 .slideBox .bd { 75 position: relative; 76 height: 100%; 77 z-index: 0; 78 } 79 80 .slideBox .bd ul{ 81 float: left!important; 82 width: 600%; 83 position: absolute; 84 } 85 86 /* ----------------------- */ 87 .slideBox .bd li { 88 zoom: 1; 89 vertical-align: middle; 90 left: 0; 91 top: 0; 92 float: left; 93 } 94 95 /*.slideBox .bd li.first {*/ 96 /*z-index: 1;*/ 97 /*}*/ 98 99 /* ----------------------- */ 100 .slideBox .bd img { 101 width: 790px; 102 height: 340px; 103 display: block; 104 } 105 106 .slideBox .prev, 107 .slideBox .next { 108 position: absolute; 109 left: 0; 110 top: 50%; 111 margin-top: -25px; 112 display: none; 113 width: 32px; 114 height: 40px; 115 background: rgba(0,0,0,0.3); 116 filter: alpha(opacity=50); 117 opacity: 0.5; 118 text-align: center; 119 font-size: 30px; 120 font-weight: bold; 121 color: #fff; 122 line-height: 40px; 123 } 124 125 .slideBox .next { 126 left: auto; 127 right: 0; 128 background-position: 8px 5px; 129 } 130 131 .slideBox .prev:hover, 132 .slideBox .next:hover { 133 filter: alpha(opacity=100); 134 opacity: 1; 135 } 136 137 138 </style> 139 </head> 140 <body> 141 <div id="slideBox" class="slideBox"> 142 143 <div class="bd" id="bd"> 144 <div class="hd"> 145 <ul id="control"></ul> 146 </div> 147 148 <ul id="imgsUl"></ul> 149 <a class="prev" id="prev" href="javascript:;" ><</a> 150 <a class="next" id="next" href="javascript:;">></a> 151 </div> 152 153 </div> 154 </body> 155 </html> 156 <script> 157 // 記錄當前圖片下標-- 為了圖片索引值同步 158 var imgIndex = 0; 159 var t = null; // 計時器變量 160 var imgWidth =790; 161 var target = 0 ; // 緩動動畫移動目標和緩動動畫開始位置 162 var autoTimer; 163 // 公共獲取事件源函數 164 function $(id) { 165 return document.getElementById(id); 166 } 167 168 // 功能需求類似tab欄，也可參考線上輪播圖效果 169 // 獲取輪播圖區 170 // 獲取輪播圖 171 var imgArr = [ 172 "images/01.jpg", 173 "images/02.jpg", 174 "images/03.jpg", 175 "images/04.jpg", 176 "images/05.jpg" 177 ]; 178 179 //自動生成小紅點li 180 // 默認設置第一個li的className是on 181 // 生成第一個默認li帶並設置className = "on" 182 var liArr = []; 183 for(var i = 0 ; i < imgArr.length ; i++ ) { 184 liArr.push(‘<li></li>‘) 185 } 186 // 轉換成字符串 187 $(‘control‘).innerHTML = liArr.join(‘‘); 188 // 設置屬性 189 $(‘control‘).children[0].setAttribute("class","on") 190 191 192 // 自動生成圖片li 193 var imgUl = $("imgsUl"); 194 195 var imgsLis = []; 196 for(var i = 0 ; i < imgArr.length ; i++ ) { 197 imgsLis.push(‘<li><a href="#"><img id="bigImg" src="‘+imgArr[i]+‘"/></a></li>‘) 198 } 199 // 轉換成字符串 200 imgUl.innerHTML = imgsLis.join(‘‘); 201 // 克隆第一張圖片li 202 imgUl.appendChild(imgUl.children[0].cloneNode(true)); 203 204 205 // 前後按鈕功能：1.鼠標移入輪播圖區，顯示前後按鈕，移出消失前後按鈕 206 $(‘bd‘).onmouseover = function () { 207 $(‘prev‘).style.display = "block"; 208 $(‘next‘).style.display = "block"; 209 } 210 $(‘bd‘).onmouseout = function () { 211 $(‘prev‘).style.display = "none"; 212 $(‘next‘).style.display = "none"; 213 } 214 215 216 217 // 圓點鼠標移到上面圖片輪播 218 var liBtns = $(‘control‘).getElementsByTagName(‘li‘); 219 for (var i = imgIndex ; i < liBtns.length ; i++) { 220 // 設置當前按鈕下標 221 liBtns[i].index = i; 222 liBtns[i].onmouseover = function () { 223 imgIndex = this.index; 224 // 開啟的緩動動畫的計時器 225 startInterval(imgIndex); 226 } 227 } 228 229 /*上下輪播圖*/ 230 // 下一張輪播圖 231 $(‘next‘).onclick = function () { 232 clearInterval(t); 233 imgIndex++; 234 if(imgIndex == imgUl.children.length ) { 235 imgUl.style.left = 0; 236 imgIndex = 1; 237 } 238 startInterval(imgIndex); 239 }; 240 // 上一張輪播圖 241 $(‘prev‘).onclick = function () { 242 clearInterval(t); 243 imgIndex--; 244 if(imgIndex == -1 ) { 245 imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px"; 246 imgIndex = imgUl.children.length - 2; 247 } 248 startInterval(imgIndex); 249 } 250 251 // 開啟緩動動畫計時器 252 function startInterval(index) { 253 // 關閉緩動動畫計時器 254 clearInterval(t); 255 for(var j = 0 ; j < liBtns.length ; j++) { 256 liBtns[j].className = ""; 257 } 258 liBtns[index%5].className = ‘on‘; 259 console.log(target+‘ttt‘); 260 t = setInterval(function () { 261 // 無縫輪播圖片 262 target = -index * imgWidth; 263 var speed = (target-imgUl.offsetLeft)/7; 264 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 265 if(target == imgUl.offsetLeft) { 266 clearInterval(t); 267 }else{ 268 imgUl.style.left = imgUl.offsetLeft + speed + "px"; 269 } 270 },30); 271 272 } 273 274 275 276 277 278 279 280 281 </script>
JavaScript--緩動運動+輪播圖