JavaScript實現輪播圖片完整代碼
本文實例為大家分享了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 id='box'> <div class='inner'> <!--輪播圖--> <ul> <li> <div><img src='http://www.hdgsjgj.cn/bcjs/img/001.png' alt=''></div> </li> <li> <div><img src='http://www.hdgsjgj.cn/bcjs/img/1.png' alt=''></div> </li> <li> <div><img src='http://www.hdgsjgj.cn/bcjs/img/6.png' alt=''></div> </li> <li> <div><img src='http://www.hdgsjgj.cn/bcjs/img/3.png' alt=''></div> </li> <li> <div><img src='http://www.hdgsjgj.cn/bcjs/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>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備