案例：完整的輪播圖 思路： 分5部分做 1. 獲取所有要用的元素 2. 做小按鈕，點擊移動圖標部分 3. 做右邊焦點按鈕，點擊移動圖片，小按鈕顏色一起跟著變 （克隆了第一圖到第六圖，用索引liObj.setAttribute("index", i)，pic = this.getAttribute(" ...
案例：完整的輪播圖
思路：
分5部分做
1. 獲取所有要用的元素
2. 做小按鈕，點擊移動圖標部分
3. 做右邊焦點按鈕，點擊移動圖片，小按鈕顏色一起跟著變 （克隆了第一圖到第六圖，用索引liObj.setAttribute("index", i)，pic = this.getAttribute("index");pic++, 當pic到5的時候，就回到pic=0的時候，同時設置樣式）
4. 做左邊焦點按鈕 (用索引，當pic=0的時候，pic--，設置樣式)
5. 自動輪播加上，設置個定時器，滑鼠進入就清除定時器，滑鼠移開就啟用定時器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .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="screen"> <!--相框--> <ul> <li><img src="images/1.jpg" width="500" height="200" /></li> <li><img src="images/2.jpg" width="500" height="200" /></li> <li><img src="images/3.jpg" width="500" height="200" /></li> <li><img src="images/4.jpg" width="500" height="200" /></li> <li><img src="images/5.jpg" width="500" height="200" /></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="common.js"></script> <script> //獲取最外面的div var box = my$("box"); //獲取相框 var screen = box.children[0]; //獲取當前相框的寬度 var imgWidth = screen.offsetWidth; //獲取ul var ulObj = screen.children[0]; //獲取ul中所有的li var list = ulObj.children; //獲取ol var olObj = screen.children[1]; //獲取焦點的div var arr = my$("arr"); var pic = 0;//全局變數 //創建小按鈕，根據ul中li的個數 for (var i = 0; i < list.length; i++) { //創建li標簽，加入到ol中 var liObj = document.createElement("li"); olObj.appendChild(liObj); liObj.innerHTML = (i + 1); //在每個ol中的li標簽上添加一個自定義屬性，存儲索引值 liObj.setAttribute("index", i); //註冊滑鼠進入時間 liObj.onmouseover = function () { //先幹掉所有ol中的li背景顏色 for (var j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } //設置當前滑鼠進入li的背景顏色 this.className = "current"; //設置滑鼠進入的li的當前索引值 pic = this.getAttribute("index"); //移動ul animate(ulObj, -pic * imgWidth); }; } //克隆一個ul中第一個li，加入到ul中的最後----克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); // 自動播放 var timeId = setInterval(clickHandle, 1000); //滑鼠進入到box 顯示左右焦點的div box.onmouseover = function () { arr.style.display = "block"; //滑鼠進入廢掉之前的定時器 clearInterval(timeId); }; //滑鼠離開box，隱藏左右焦點的div box.onmouseout = function () { arr.style.display = "none"; timeId = setInterval(clickHandle, 1000); }; //右邊按鈕 my$("right").onclick = clickHandle; function clickHandle() { //如果pic的值是5，恰巧是ul中li的個數-1的值，此時頁面顯示第六個圖片 //而客戶認為這是一個圖，所以如果用戶再次點擊按鈕，應該看到第二個圖片 if (pic == list.length - 1) { //如何從第六個圖跳轉到第一個圖 pic = 0; //先設置pic=0; ulObj.style.left = 0 + "px";//把ul位置還原成開始的預設位置 } pic++;//立刻設置pic+1，那麼用戶就會看到第二個圖片； animate(ulObj, -pic * imgWidth); //如果pic==5,此時顯示第六個圖，內容是第一張圖片，第一個小按鈕有顏色 if (pic == list.length - 1) { //第五個顏色幹掉 olObj.children[olObj.children.length - 1].className = ""; olObj.children[0].className = "current"; } else { //幹掉所有小按鈕背景顏色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[pic].className = "current"; } }; //左邊按鈕 my$("left").onclick = function () { if (pic == 0) { pic = 5; ulObj.style.left = -pic * imgWidth + "px"; } pic--; animate(ulObj, -pic * imgWidth); //設置小按鈕的顏色---先所有小按鈕幹掉顏色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } //當前pic索引對應的按鈕，設置顏色 olObj.children[pic].className = "current"; }; // </script> </body> </html>
