圖片輪播圖之電商大廣告
就按鈕，還有自動播放。有幾個難點，就是最後一張到第一張，和第一張到最後一張的效果無縫切換需要注意一下。然後就是右下角的li根據圖片的索引進行繫結。
程式碼如下
<!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); }; } //設定ol中第一個li有背景顏色 olObj.children[0].className = "current";
//克隆一個ul中第一個li,加入到ul中的最後=====克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自動播放 var timeId= setInterval(clickHandle,1000);
//滑鼠進入到box的div顯示左右焦點的div box.onmouseover = function () { arr.style.display = "block"; //滑鼠進入廢掉之前的定時器 clearInterval(timeId); }; //滑鼠離開到box的div隱藏左右焦點的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) { //如何從第6個圖,跳轉到第一個圖 pic = 0;//先設定pic=0 ulObj.style.left = 0 + "px";//把ul的位置還原成開始的預設位置 } pic++;//立刻設定pic加1,那麼此時使用者就會看到第二個圖片了 animate(ulObj, -pic * imgWidth);//pic從0的值加1之後,pic的值是1,然後ul移動出去一個圖片 //如果pic==5說明,此時顯示第6個圖(內容是第一張圖片),第一個小按鈕有顏色, 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";
};
//設定任意的一個元素,移動到指定的目標位置 function animate(element, target) { clearInterval(element.timeId); //定時器的id值儲存到物件的一個屬性中 element.timeId = setInterval(function () { //獲取元素的當前的位置,數字型別 var current = element.offsetLeft; //每次移動的距離 var step = 10; step = current < target ? step : -step; //當前移動到位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定時器 clearInterval(element.timeId); //直接到達目標 element.style.left = target + "px"; } }, 10); } </script>
<script>
// var num=0; // function f1(){ // // num=1000; // } // f1(); // console.log(num); </script> </body> </html>