时间：2023-09-06 11:18:01 | 来源：网站运营
时间：2023-09-06 11:18:01 来源：网站运营
纯JavaScript实现轮播图案例（附源码）：轮播图在很多的网页中都是比较的常见的，对于初学者来说更是练习js的重要案例。虽然现在做轮播图可以使用很多的插件去实现，但是使用原生js写轮播图对于很多的初学者来说也是很有必要掌握的。下面分享这轮播图案例。话不多说，直接上干货
在线咨询
<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> //封装根据id获取dom function myFunction(id) { return document.getElementById(id); } //封装动画函数 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]; //获取相框宽度 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]; //声明变量存储点击当前按钮的索引 var index = 0; //设置小按钮功能 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"; }; //右边按钮功能 //克隆第一个图片放在ul最后 ulObj.appendChild(ulObj.children[0].cloneNode(true)); //自动播放 var timeId = setInterval(rightClick, 1000); //鼠标移入移出，左右按钮显示和隐藏 box.onmouseover = function() { focus.style.display = "block"; clearInterval(timeId); }; box.onmouseout = function() { focus.style.display = "none"; timeId = setInterval(rightClick, 1000); }; //右边按钮功能函数 function rightClick() { if (index == liObjs.length - 1) { index = 0; ulObj.style.left = 0 + "px"; } index++; animate(ulObj, -index * innerWidth); //每张图片对应的按钮背景改变 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"; } }; //调用右边功能按钮函数 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>以上源码，有兴趣的可以运行试试，实现轮播图效果的方式有很多种，代码需要优化的地方请自行解决。感兴趣的多多支持，后期不定时更新更多web前端的知识关键词：图案,实现
