JavaScript實現輪播圖片完整程式碼
阿新 • • 發佈:2020-03-09
本文例項為大家分享了JavaScript實現輪播圖片的具體程式碼,供大家參考,具體內容如下
JS程式碼註釋清晰明瞭,一看就懂!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最簡單的輪播效果</title> <style> * { margin: 0; padding: 0 } .box { width: 500px; height: 300px; border: 1px solid #ccc; margin: 100px auto; padding: 5px; } .inner { width: 500px; height: 300px; position: relative; overflow: hidden; } .inner img { width: 500px; height: 300px; vertical-align: top } ul { width: 1000%; position: absolute; list-style: none; left: 0; top: 0; } .inner li { float: left; } ol { position: absolute; height: 20px; right: 20px; bottom: 20px; text-align: center; padding: 5px; } ol li { display: inline-block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer; } ol .current { background-color: red; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <!--輪播圖--> <ul> <li> <div><img src="img/001.png" alt="JavaScript實現輪播圖片完整程式碼"></div> </li> <li> <div><img src="img/1.png" alt="JavaScript實現輪播圖片完整程式碼"></div> </li> <li> <div><img src="img/6.png" alt="JavaScript實現輪播圖片完整程式碼"></div> </li> <li> <div><img src="img/3.png" alt="JavaScript實現輪播圖片完整程式碼"></div> </li> <li> <div><img src="img/4.png" alt="JavaScript實現輪播圖片完整程式碼"></div> </li> </ul> </div> </div> <script> /** * * @param id 傳入元素的id * @returns {HTMLElement | null} 返回標籤物件,方便獲取元素 */ function my$(id) { return document.getElementById(id); } //獲取各元素,方便操作 var box = my$("box"); var inner = box.children[0]; var ulObj = inner.children[0]; var list = ulObj.children; var olObj = inner.children[1]; var imgWidth = inner.offsetWidth; var right = my$("right"); var pic = 0; //根據li個數,建立小按鈕 for(var i = 0; i < list.length; i++) { var liObj = document.createElement("li"); //olObj.appendChild(liObj); liObj.innerText = (i + 1); liObj.setAttribute("index",i); //為按鈕註冊mouseover事件 liObj.onmouseover = function() { //先清除所有按鈕的樣式 for(var j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } this.className = "current"; pic = this.getAttribute("index"); animate(ulObj,-pic * imgWidth); } } //設定ol中第一個li有背景顏色 //olObj.children[0].className = "current"; //克隆一個ul中第一個li,加入到ul中的最後=====克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); var timeId = setInterval(onmouseclickHandle,4000); function onmouseclickHandle() { //如果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移動出去一個圖片 } //設定任意的一個元素,移動到指定的目標位置 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> </body> </html>
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。