完整輪播圖(4)
阿新 • • 發佈:2018-11-13
我們終於迎來了最完整的輪播圖
當然還是WebAPI做的
依舊和之前一樣,結構樣式只給程式碼,script裡面會有一些註釋
有的圖片路徑可能會報錯什麼的,因為我本來使用的是本地圖片,然後換成了臨時百度的圖片,圖片路徑出錯了你們要自己換圖片,反正是不要指望我了,嘻嘻
一、結構
<div class="all" id='box'> <div class="screen"> <ul> <li><img src="http://ec4.images-amazon.com/images/I/41VCPfSzLUL.jpg" width="500" height="200"/></li> <li><img src="http://making-photos.b0.upaiyun.com/review_photos/64b043ceb8704fd2e921216aa812a1d0.jpg" width="500" height="200"/></li> <li><img src="http://img5.pcpop.com/ArticleImages/500x375/3/3270/003270084.jpg" width="500" height="200"/></li> <li><img src="http://imgsrc.baidu.com/forum/w=580/sign=0eb36175a144ad342ebf878fe0a30c08/e5025fda81cb39db296da4ced0160924aa18303b.jpg" width="500" height="200"/></li> <li><img src="http://imgsrc.baidu.com/forum/w=580/sign=6035eda2a18b87d65042ab1737092860/ae37dffaaf51f3de67a6e6f794eef01f3a29792a.jpg" width="500" height="200"/></li> </ul> <ol> <!-- 動態建立的小方塊,新增在這裡,樣式已經給寫好了--> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div>
二、樣式
<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: yellow; } #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>
三、行為
<script> //1 獲取元素 var box = document.getElementById("box"); var screenBox = box.children[0];//可視區域 var imgWid = screenBox.offsetWidth;//圖片寬度 var ul = screenBox.children[0];//要運動的ul var lisUl = ul.children;//所有的圖片li var ol = screenBox.children[1];//放置小方塊的位置 var lisOl = ol.children;//要操作的小方塊(預設沒有內容,新增後會自動增加) var arrBox = box.children[1];//左右箭頭的父盒子 var arrLeft = arrBox.children[0]; var arrRight = arrBox.children[1]; //2 動態建立元素部分(小方塊建立) var li; for (var i = 0; i < lisUl.length; i++) { li = document.createElement("li"); li.innerText = i + 1; ol.appendChild(li); } //2.1 給第一個小方塊設定預設顏色 lisOl[0].className = "current"; //3 簡單輪播圖效果 for (i = 0; i < lisOl.length; i++) { lisOl[i].index = i; lisOl[i].onclick = function () { //----新增步驟:點選按鈕1時,判斷,如果當前顯示的為假的第一張,直接抽回到0 if (count == lisUl.length - 1) { ul.style.left = 0 + "px"; // count = 0; } //點選按鈕變色效果 for (var i = 0; i < lisOl.length; i++) { lisOl[i].className = ""; } this.className = "current"; //根據當前按鈕的索引值設定ul的運動位置 animate(ul, -this.index * imgWid); //由於需要讓左右箭頭操作與小方塊操作聯動,需要在點選小方塊時同步count的值,跟當前按鈕索引值相同 count = this.index; } } //4 左右焦點圖效果 var count = 0;//用於記錄滾出可視區域的圖片張數 //對ul中的第一個li進行克隆操作,為了製作無縫滾動效果 ul.appendChild(lisUl[0].cloneNode(true)); arrRight.onclick = fun; arrLeft.onclick = function () { //當顯示的圖片為第一張時,如果點選左按鈕,需要抽回到假的第一張顯示的位置,count也需要對應設定 if (count == 0) { ul.style.left = -(lisUl.length - 1) * imgWid + "px"; count = lisOl.length; } count--; animate(ul, -count * imgWid); //根據count的值,設定對應的小方塊變色即可 for (var i = 0; i < lisOl.length; i++) { lisOl[i].className = ""; } lisOl[count].className = "current"; } //5 自動播放 //間隔一段時間,執行一下右按鈕的所有功能即可 var timer = null; //timer = setInterval(fun,2000); //元素.click(); 用於直接觸發標籤的點選事件,不能採用函式體的書寫形式 timer = setInterval(function () { arrRight.click(); }, 2000); //滑鼠移入移出,對自動播放進行取消和重新設定 //滑鼠移入移出顯示隱藏箭頭 box.onmouseover = function () { arrBox.style.display = "block"; clearInterval(timer); }; box.onmouseout = function () { arrBox.style.display = "none"; timer = setInterval(function () { arrRight.click(); }, 2000); }; function fun() { //點選右按鈕時檢測,如果當前顯示的為假的第一張,再次點選右按鈕時需要先進行抽回操作,然後再進行滾動即可 if (count == lisOl.length) {//lisOl.length與lisUl.length-1的值相同,使用哪個都可以 ul.style.left = 0 + "px"; //ul的位置需要和count的值同步,設定left為0後,再將count設定為0 count = 0; } count++; animate(ul, -count * imgWid); //點選左右按鈕時,設定小方塊變色效果 //根據count的值,設定對應的小方塊變色即可 for (var i = 0; i < lisOl.length; i++) { lisOl[i].className = ""; } //如果count為5,lisOl.length,設定lisOl[0]類名操作 if (count == lisOl.length) { lisOl[0].className = "current"; } else { lisOl[count].className = "current"; } } ; function animate(element, target) { clearInterval(element.timer);//清除舊的定時器,保證勻速運動,防止加速效果 element.timer = setInterval(function () { //1 獲取元素當前位置 使用offsetLeft屬性 var current = element.offsetLeft; //2 設定步長 var step = 17; //根據當前位置和目標位置的大小關係進行判斷 step = target > current ? step : -step; //5 運動條件設定 //檢測當前位置和目標位置之間的距離,如果滿足一個step的距離,可以運動,否則直接運動到目標位置,結束 if (Math.abs(target - current) > Math.abs(step)) { //3 設定運動公式:元素位置(新) = 元素位置(舊) + 步長; current = current + step; //4 設定給元素的left值運動 element.style.left = current + "px"; } else { //6 讓element直接運動到目標位置,再清除定時器 element.style.left = target + "px"; clearInterval(element.timer); } }, 20); } </script>