JavaScript實(shí)現(xiàn)輪播圖片完整代碼
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖片的具體代碼，供大家參考，具體內(nèi)容如下
JS代碼注釋清晰明了，一看就懂！
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <title>最簡(jiǎn)單的輪播效果</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.lshqa.cn/bcjs/img/001.png' alt=''></div> </li> <li> <div><img src='http://www.lshqa.cn/bcjs/img/1.png' alt=''></div> </li> <li> <div><img src='http://www.lshqa.cn/bcjs/img/6.png' alt=''></div> </li> <li> <div><img src='http://www.lshqa.cn/bcjs/img/3.png' alt=''></div> </li> <li> <div><img src='http://www.lshqa.cn/bcjs/img/4.png' alt=''></div> </li> </ul> </div> </div> <script> /** * * @param id 傳入元素的id * @returns {HTMLElement | null} 返回標(biāo)簽對(duì)象，方便獲取元素 */ 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; //根據(jù)li個(gè)數(shù)，創(chuàng)建小按鈕 for(var i = 0; i < list.length; i++) { var liObj = document.createElement('li'); //olObj.appendChild(liObj); liObj.innerText = (i + 1); liObj.setAttribute('index', i); //為按鈕注冊(cè)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); } } //設(shè)置ol中第一個(gè)li有背景顏色 //olObj.children[0].className = 'current'; //克隆一個(gè)ul中第一個(gè)li,加入到ul中的最后=====克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); var timeId = setInterval(onmouseclickHandle, 4000); function onmouseclickHandle() { //如果pic的值是5,恰巧是ul中l(wèi)i的個(gè)數(shù)-1的值,此時(shí)頁(yè)面顯示第六個(gè)圖片,而用戶會(huì)認(rèn)為這是第一個(gè)圖, //所以,如果用戶再次點(diǎn)擊按鈕,用戶應(yīng)該看到第二個(gè)圖片 if(pic == list.length - 1) { //如何從第6個(gè)圖,跳轉(zhuǎn)到第一個(gè)圖 pic = 0; //先設(shè)置pic=0 ulObj.style.left = 0 + 'px'; //把ul的位置還原成開始的默認(rèn)位置 } pic++; //立刻設(shè)置pic加1,那么此時(shí)用戶就會(huì)看到第二個(gè)圖片了 animate(ulObj, -pic * imgWidth); //pic從0的值加1之后,pic的值是1,然后ul移動(dòng)出去一個(gè)圖片 } //設(shè)置任意的一個(gè)元素,移動(dòng)到指定的目標(biāo)位置 function animate(element, target) { clearInterval(element.timeId); //定時(shí)器的id值存儲(chǔ)到對(duì)象的一個(gè)屬性中 element.timeId = setInterval(function() { //獲取元素的當(dāng)前的位置,數(shù)字類型 var current = element.offsetLeft; //每次移動(dòng)的距離 var step = 10; step = current < target ? step : -step; //當(dāng)前移動(dòng)到位置 current += step; if(Math.abs(current - target) > Math.abs(step)) { element.style.left = current + 'px'; } else { //清理定時(shí)器 clearInterval(element.timeId); //直接到達(dá)目標(biāo) element.style.left = target + 'px'; } }, 10); } </script> </body></html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……2. IDEA版最新MyBatis程序配置教程詳解3. 教你如何寫出可維護(hù)的JS代碼4. Django:使用filter的pk進(jìn)行多值查詢操作5. 使用Python和百度語(yǔ)音識(shí)別生成視頻字幕的實(shí)現(xiàn)6. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式7. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)8. idea打開多個(gè)窗口的操作方法9. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟10. docker /var/lib/docker/aufs/mnt 目錄清理方法
網(wǎng)公網(wǎng)安備