JS——旋轉木馬
阿新 • • 發佈：2017-12-11
clear def 循環 false utf for efi eat nload
1、opacity和zIndex的綜合運用
2、樣式的數組的替換：向右邊滑動---刪除樣式數組第一位並在數組最後添加；向左邊滑動---刪除樣式數組最後一位並在數組前添加
3、開閉原則，只有當回調函數執行完畢以後，我再次點擊滑動按鈕才有用
初始化 1 2 3 4 5 a b c d e ==>向右邊滑動，數字動，樣式不變 5 1 2 3 4 a b c d e ==>向右邊滑動，字母動---刪除第一位並在數組最後添加 1 2 3 4 5 b c d e a ==>向左邊滑動，數字動 2 3 4 5 1 a b c d e ==>向左邊滑動，字母動---刪除最後一位並在數組前添加 1 2 3 4 5 e a b c d
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 1200px; margin: 10px auto; } .content{ height: 500px; position: relative; } ul { list-style: none; } li { position: absolute; left: 200px; top: 0; } li img { width: 100%; } .arrow { opacity: 0; } .prev, .next { width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; background: url(images/prev.png) no-repeat; z-index: 99; } .next { right: 0; background-image: url(images/next.png); } </style> <script> /** * Created by Lenovo on 2016/9/13. */ window.onload = function () { var arr = [ { // 1 width: 400, top: 70, left: 50, opacity: 20, zIndex: 2 }, { // 2 width: 600, top: 120, left: 0, opacity: 80, zIndex: 3 }, { // 3 width: 800, top: 100, left: 200, opacity: 100, zIndex: 4 }, { // 4 width: 600, top: 120, left: 600, opacity: 80, zIndex: 3 }, { //5 width: 400, top: 70, left: 750, opacity: 20, zIndex: 2 } ]; //0.獲取元素 var content = document.getElementById("content"); var liArr = content.children[0].children; var arrow = content.children[1]; var arrowChildren = arrow.children; //設置一個開閉原則變量，點擊以後修改這個值。 var flag = true; //1.鼠標放到輪播圖上，兩側的按鈕顯示，移開隱藏。 content.onmouseenter = function () { //arrow.style.opacity = 1; animate(arrow, {"opacity": 100}); } content.onmouseleave = function () { //arrow.style.opacity = 1; animate(arrow, {"opacity": 0}); } //2.利用緩動框架初始化整個頁面，move函數無參數，不會操作arr數組 move(); //3.把兩側按鈕綁定事件。(調用同一個方法，只有一個參數，true為正向旋轉，false為反向旋轉) arrowChildren[0].onclick = function () { if (flag) { flag = false; move(true); } } arrowChildren[1].onclick = function () { if (flag) { flag = false; move(false); } } //4.書寫函數。 function move(bool) { //判斷：如果等於undefined,那麽就不執行這兩個if語句 if (bool === true || bool === false) { if (bool) { arr.unshift(arr.pop()); } else { arr.push(arr.shift()); } } //再次為頁面上的所有li賦值屬性，利用緩動框架 for (var i = 0; i < liArr.length; i++) { animate(liArr[i], arr[i], function () { flag = true; }); } } } //參數變為2個，將屬性atrr和值都存儲到json中 function animate(ele, json, fn) { //先清定時器 clearInterval(ele.timer); ele.timer = setInterval(function () { //開閉原則 var bool = true; //遍歷屬性和值，分別單獨處理json //attr == k(鍵) target == json[k](值) for (var k in json) { //四部 var leader; //判斷如果屬性為opacity的時候特殊獲取值 if (k === "opacity") { leader = getStyle(ele, k) * 100 || 100; } else { leader = parseInt(getStyle(ele, k)) || 0; } //1.獲取步長 var step = (json[k] - leader) / 10; //2.二次加工步長 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.賦值 //ele.style[k] = leader + "px"; //特殊情況特殊賦值 if (k === "opacity") { ele.style[k] = leader / 100; //兼容IE678 ele.style.filter = "alpha(opacity=" + leader + ")"; //如果是層級，一次行賦值成功，不需要緩動賦值 //為什麽？需求！ } else if (k === "zIndex") { ele.style.zIndex = json[k]; } else { ele.style[k] = leader + "px"; } //4.清除定時器 //判斷: 目標值和當前值的差大於步長，就不能跳出循環 //不考慮小數的情況：目標位置和當前位置不相等，就不能清除清除定時器。 // if (json[k] !== leader) { // bool = false; // } if (Math.abs(json[k] - leader) > Math.abs(step)) { bool = false; } } console.log(1); //只有所有的屬性都到了指定位置，bool值才不會變成false； if (bool) { for (k in json) { if (k === "opacity") { ele.style[k] = json[k] / 100; ele.style.filter = "alpha(opacity=" + leader + ")";//兼容IE678 } else if (k === "zIndex") { ele.style.zIndex = json[k]; } else { ele.style[k] = json[k] + "px"; } } clearInterval(ele.timer); //所有程序執行完畢之後執行回調函數 //現在只有傳遞了回調函數，才能執行 if (fn) { fn(); } } }, 25); } //兼容方法獲取元素樣式 function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </head> <body> <div class="box"> <div class="content" id="content"> <ul> <li><a href="#"><img src="images/slidepic1.jpg"></a></li> <li><a href="#"><img src="images/slidepic2.jpg"></a></li> <li><a href="#"><img src="images/slidepic3.jpg"></a></li> <li><a href="#"><img src="images/slidepic4.jpg"></a></li> <li><a href="#"><img src="images/slidepic5.jpg"></a></li> </ul> <!--左右切換按鈕--> <div class="arrow" id="arrow"> <a href="javascript:;" class="prev"></a> <a href="javascript:;" class="next"></a> </div> </div> </div> </body> </html>
JS——旋轉木馬