電商的廣告切換—三種切換效果
阿新 • • 發佈: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>
效果: