時(shí)間：2023-09-06 11:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-06 11:18:01 來源：網(wǎng)站運(yùn)營(yíng)
純JavaScript實(shí)現(xiàn)輪播圖案例（附源碼）：輪播圖在很多的網(wǎng)頁(yè)中都是比較的常見的，對(duì)于初學(xué)者來說更是練習(xí)js的重要案例。雖然現(xiàn)在做輪播圖可以使用很多的插件去實(shí)現(xiàn)，但是使用原生js寫輪播圖對(duì)于很多的初學(xué)者來說也是很有必要掌握的。下面分享這輪播圖案例。話不多說，直接上干貨
在線咨詢
<body> <div class="box" id="box"> <div class="inner"> <ul> <li> <a href="#"><img src="../image/1.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/2.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/3.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/4.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/5.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/6.jpg" alt=""></a> </li> </ul> <ol> </ol> </div> <div class="focus"> <div class="left-button"> <div></div> </div> <div class="right-button"> <div></div> </div> </div> </div></body>3、css代碼<style> * { margin: 0px; padding: 0px; } li { list-style: none; } .box { position: relative; width: 500px; height: 300px; margin: 50px auto; border: solid 1px #cccccc; } .inner { position: relative; width: 490px; height: 290px; margin: 5px; overflow: hidden; } .inner ul { position: absolute; width: 1000%; height: 100%; } .inner ul li { float: left; width: 490px; height: 290px; } .inner ul li a img { width: 100%; height: 100%; } .focus { position: absolute; display: none; width: 490px; height: 30px; top: 0px; bottom: 0px; left: 5px; margin: auto; } .left-button, .right-button { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; top: 0px; bottom: 0px; margin: auto; background: rgba(0, 0, 0, 0.5); color: white; } .right-button { right: 0px; } .left-button>div, .right-button>div { width: 15px; height: 15px; margin-top: 7.5px; border: solid 2px white; box-sizing: border-box; transform: rotateZ(45deg); } .left-button>div { border-top: none; border-right: none; margin-left: 10px; } .right-button>div { position: absolute; border-bottom: none; border-left: none; right: 10px; } ol { position: absolute; height: 20px; bottom: 10px; right: 10px; } ol li { display: inline-block; width: 20px; height: 20px; margin-left: 5px; line-height: 20px; border-radius: 50%; text-align: center; text-decoration: none; font-size: 12px; background: rgba(0, 0, 0, 0.5); } .current { background: orangered; color: white; } </style>4、JavaScript代碼<script> //封裝根據(jù)id獲取dom function myFunction(id) { return document.getElementById(id); } //封裝動(dòng)畫函數(shù) function animate(element, target) { clearInterval(element.timeId) 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) } //獲取最外面的div var box = myFunction("box"); //獲取相框 var inner = box.children[0]; //獲取相框?qū)挾?/span> var innerWidth = inner.offsetWidth; //獲取ul var ulObj = inner.children[0]; //獲取ol var olObj = inner.children[1]; //獲取ul中的li var liObjs = ulObj.children; //獲取focus var focus = box.children[1]; //聲明變量存儲(chǔ)點(diǎn)擊當(dāng)前按鈕的索引 var index = 0; //設(shè)置小按鈕功能 for (var i = 0; i < liObjs.length; i++) { var lis = document.createElement("li"); lis.innerHTML = i + 1; olObj.appendChild(lis); lis.setAttribute("index", i); lis.onclick = function() { for (var j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } this.className = "current"; index = this.getAttribute("index"); animate(ulObj, -index * innerWidth); } olObj.children[0].className = "current"; }; //右邊按鈕功能 //克隆第一個(gè)圖片放在ul最后 ulObj.appendChild(ulObj.children[0].cloneNode(true)); //自動(dòng)播放 var timeId = setInterval(rightClick, 1000); //鼠標(biāo)移入移出，左右按鈕顯示和隱藏 box.onmouseover = function() { focus.style.display = "block"; clearInterval(timeId); }; box.onmouseout = function() { focus.style.display = "none"; timeId = setInterval(rightClick, 1000); }; //右邊按鈕功能函數(shù) function rightClick() { if (index == liObjs.length - 1) { index = 0; ulObj.style.left = 0 + "px"; } index++; animate(ulObj, -index * innerWidth); //每張圖片對(duì)應(yīng)的按鈕背景改變 if (index == liObjs.length - 1) { olObj.children[olObj.children.length - 1].className = ""; olObj.children[0].className = "current"; } else { for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[index].className = "current"; } }; //調(diào)用右邊功能按鈕函數(shù) focus.children[1].onclick = rightClick; //左邊按鈕 console.log(focus.children[0]); focus.children[0].onclick = function() { if (index == 0) { index = ulObj.children.length - 1; console.log(index); console.log(-index * innerWidth); ulObj.style.left = -index * innerWidth + "px"; } index--; animate(ulObj, -index * innerWidth); for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[index].className = "current"; };</script>以上源碼，有興趣的可以運(yùn)行試試，實(shí)現(xiàn)輪播圖效果的方式有很多種，代碼需要優(yōu)化的地方請(qǐng)自行解決。感興趣的多多支持，后期不定時(shí)更新更多web前端的知識(shí)關(guān)鍵詞：圖案,實(shí)現(xiàn)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
