電商的廣告切換—三種切換效果
阿新 • • 發佈：2018-11-10
要點：
1.動畫的封裝，前面已經寫了一個動畫函式的封裝，這是應用。這個例子中全部都是用一個封裝的動畫函式做成的，所以在第一張點選左邊按鈕時切換到最後一張，很突兀，同時如果切換的圖片不是相鄰的圖片動畫時間很長，這些都可以另外加動畫解決。同時，從這個例子，對函式實際操作理解又深了一層。
2.定時器的使用，定時器的定義方式有兩種，清理方式最好跟定義的方式相同。一般來說，定時器清除之後，還會定義同名定時器，這時定時器的名字一定要和原來的相同。
3.自定義屬性，這裡是index注意，定義的全域性變數，因為在多個處理函式中都會有相同的index，注意本質index的記憶體空間的值是否發生改變，不要一直糾結什麼全域性變數區域性變數。
4.最後一次說排他性，就是在將目標物件的類賦值為高亮類時，清除其他所有的定義的類名。
5.這個例子上面的ol原來css直接寫空標籤，但是將內部的<li>標籤樣式全部寫好了，動態建立<li>標籤的時候，要想看看css怎麼定義的，根據他的名字完成，要統一。
6.節點的拷貝，.cloneNode 裡面的引數是boolean型別，true為將屬性也複製，false不保留屬性
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 730px; height: 454px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .inner { width: 730px; height: 454px; overflow: hidden; position: relative; } .inner li { width: 730px; height: 454px; float: left; } .inner ul { position: absolute; left: 0; top: 0px; width: 40000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: #DB192A; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="inner"><!--相框--> <ul> <li><img src="images14/1.jpg"></li> <li><img src="images14/2.jpg"></li> <li><img src="images14/3.jpg"></li> <li><img src="images14/4.jpg"></li> <li><img src="images14/5.jpg"></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script type="text/javascript"> function myGet(id){ return document.getElementById(id); } var box = myGet("box"); // 獲取盒子 var inner = box.children[0]; // 獲取顯示的區域 var innerWidth = inner.offsetWidth; // 獲取顯示區域的寬度 var ulObj = inner.children[0]; // 獲取ul，為了移動圖片，顯示出來 var liObjs = ulObj.children; // 獲取li標籤的偽陣列，為了後面的判斷長度進而定義自定義屬性的索引 var olObj = inner.children[1]; // 獲取ol物件，為了後面的位置的索引的小按鈕，是動態建立的 var arrObj = myGet("arr"); // 獲取左右焦點的div var index = 0; // 先將index定義一個全域性的為0值的變數 for(var i=0;i<liObjs.length;i++){ var olLi = document.createElement("li"); olObj.appendChild(olLi); olLi.innerHTML = (i+1); // 在ol中動態建立li標籤，個數跟上面的承載圖片的li標籤的個數一樣 olLi.setAttribute("index",i); // 為每個ol中的li提供一個自定義的索引值 olLi.onmouseover = function(){ for(var j=0;j<olObj.children.length;j++){ olObj.children[j].removeAttribute("class"); } // 當滑鼠進入ol中的任何一個li標籤時，將其他li標籤的屬性全部去掉 this.className = "current"; // 將進入的li標籤的屬性設定為高亮 index = this.getAttribute("index"); animate(ulObj,-index*innerWidth); } // 這個也是排他的功能，在想要將目標物件進行高亮顯示的時候，先對其他不符合條件的樣式全部去除 } olObj.children[0].className = "current"; // 將ol第一個li標籤預設設定成高亮類，這個必須在排他功能的後面，因為前面一步會清空樣式 ulObj.appendChild(ulObj.children[0].cloneNode(true)); // .cloneNode()是複製節點功能，裡面的引數是boolean型別，true為將屬性也複製，false不保留屬性。 // 這步操作是為了使用者看到的視覺切換效果不那麼明顯，同時在動態建立下面的帶字的ol時，不會將這個算上 var intervalName = setInterval(clickRight,1500); // 定義一個計時器，每隔1.5s進行一次右擊按鈕的操作 box.onmouseover = function(){ arr.style.display = "block"; clearInterval(intervalName); // 滑鼠進入後，清理定時器 }; box.onmouseout = function(){ arr.style.display = "none"; intervalName = setInterval(clickRight,1000); // 滑鼠離開重新定義一個同名定時器，為了清理 }; // 通過滑鼠進入和離開事件，而顯示左右兩邊拓展的顯示和隱藏 myGet("right").onclick = clickRight; // 將點選右邊按鈕的程式碼封裝起來，用定時器呼叫，達到自動切換的效果 function clickRight(){ if(index==liObjs.length-1){ index = 0; ulObj.style.left = 0 + "px"; } index++; // 在獲取元素模組下面，一開始就定義一個index的全域性變數值為0，在滑鼠進入小方塊裡面index的值改變 // 改變的記憶體中指向的值，全域性變數也可以使用 animate(ulObj,-index*innerWidth); if(index == liObjs.length-1){ // 這裡之所以長度 -1，不是因為預設的屬性從零開始，這個是自定義屬性，將最後一個減1是因為第六張圖片跟第一張圖片的顯示效果是一致的 olObj.children[index-1].className = ""; olObj.children[0].className = "current"; // 如果在最後一個高亮的話，點選下一張圖片，最後一個隱藏起來，將1高亮。 }else{ for(var i=0;i<olObj.children.length-1;i++){ olObj.children[i].removeAttribute("class"); } olObj.children[index].className = "current"; } // 排他功能，將其他的標籤樣式全部去除，將選中的帶有數字的標籤高亮顯示 } myGet("left").onclick = function(){ if(index==0){ index = olObj.children.length -1; ulObj.style.left = -index*innerWidth + "px"; // 高亮類在第一個的時候，將索引變為最後一個的前一個，因為最後一張圖片內容跟第一張一樣 // 同時，將圖片的位置移動到倒數第二張圖片的位置，這個跳轉是一瞬間執行的，沒有過渡效果，可以自己再封裝一個動畫 }else{ index--; animate(ulObj,-index*innerWidth); // 點選一次ul向右移動一張圖片的距離，而顯示效果是向左移動一張圖片的大小 for(var i=0; i<olObj.children.length-1;i++){ olObj.children[i].removeAttribute("class"); } olObj.children[index].className = "current"; // 排他功能，跟上面的一樣 } } function animate(element,target){ clearInterval(element.intervalName); // 每次點選移動按鈕的時候,清理定時器,將原來的定時器清理掉,不然會疊加多執行緒多個定時器,加快速度 element.intervalName = setInterval(function(){ var current = element.offsetLeft; // 通過.style.left不能獲取style標籤裡面的值，只能獲取到內部樣式的值 // 而.offsetLeft這個值，可以獲取到任何位置，div這個屬性的.left的值，不帶單位 var step = 80; // 每次增加10畫素 step = current<target?step:-step; // 判斷是在目標的左邊還是右邊，從而判斷是前進還是後退 current += step; if(Math.abs(target-current)>Math.abs(step)){ element.style.left = current + "px"; }else{ clearInterval(element.intervalName); element.style.left = target + "px"; // 當執行到最後一步時，如果不滿增加的長度，而再一次執行時，而又超過目標畫素的距離， // 所以設定直接一步到目標距離 } },30) } </script> </body> </html>
效果：
