小編給大家分享一下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=""></div> </li> <li> <div><img src="img/1.png" alt=""></div> </li> <li> <div><img src="img/6.png" alt=""></div> </li> <li> <div><img src="img/3.png" alt=""></div> </li> <li> <div><img src="img/4.png" alt=""></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>
看完了這篇文章,相信你對“JavaScript如何實現輪播圖片”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。