这篇文章主要介绍“如何用JavaScript实现轮播图效果”，在日常操作中，相信很多人在如何用JavaScript实现轮播图效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用JavaScript实现轮播图效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #box { margin: 30px auto; width: 590px; height: 340px; position: relative; } #banner-list > li { position: absolute; left: 0; right: 0; opacity: 0; /*过渡动画*/ transition: opacity 2s ease; } #left, #right { width: 30px; height: 60px; text-align: center; line-height: 60px; font-size: 24px; color: rgba(255,255,255,0.7); background-color: rgba(0,0,0,0.3); position: absolute; top: 50%; margin-top: -30px; z-index: 3; } #right { right: 0; } #tag-list { width: 130px; position: absolute; left: 50%; bottom: 8px; margin-left: -55px; } #tag-list > li { float: left; width: 18px; height: 18px; margin: 4px; text-align: center; line-height: 18px; font-size: 13px; background-color: white; border-radius: 9px; /*过渡动画*/ transition: background-color 1s ease; } </style> <script> window.onload = function (){ //获取tag_list和圆圈list var tag_list = document.getElementById("tag-list"); var list = tag_list.children; //1.获取 ul(banner_list) 和 所有的li let banner_list = document.getElementById("banner-list"); let bannerLi = banner_list.children; //2.默认显示第一张banner bannerLi[0].className = "current-banner" bannerLi[0].style.opacity = 1 list[0].style.backgroundColor = "red" //3.索引从0开始，默认显示第一张。 //count表示当前显示页面的索引 let count = 0; //4.点击>向右切换 var right = document.getElementById("right"); right.onclick = function (){ //4.1先将当前页面隐藏 bannerLi[count].className = "" bannerLi[count].style.opacity = 0 list[count].style.backgroundColor = "white" //4.2.页码加1,当到第6张(index=5)，切换到第一张(index=0) if (++count == 5){ count = 0 } //4.3 设置当前页码为显示 bannerLi[count].className = "current-banner" bannerLi[count].style.opacity = 1 list[count].style.backgroundColor = "red" } //和right差不多，修改下条件 var left = document.getElementById("left"); left.onclick = function (){ //4.1先将当前页面隐藏 bannerLi[count].className = "" bannerLi[count].style.opacity = 0 list[count].style.backgroundColor = "white" //4.2.页码减1,当到第0张(index=-1)，切换到第5张(index=4) if (--count == -1){ count = 4 } //4.3 设置当前页码为显示 bannerLi[count].className = "current-banner" bannerLi[count].style.opacity = 1 list[count].style.backgroundColor = "red" } //给所有圆圈绑定鼠标事件 for (let i = 0; i < list.length; i++) { list[i].onmouseenter= function (){ //设置圆圈样式 list[count].style.backgroundColor = "white" list[i].style.backgroundColor = "red" //设置banner图样式 bannerLi[count].className = "" bannerLi[count].style.opacity = 0 bannerLi[i].className = "current-banner" bannerLi[i].style.opacity = 1 //将count置为i count = i } } } </script> </head> <body> <div id="box"> <ul id="banner-list"> <li class="current-banner"><img src="banner-img/11.jpg" alt=""></li> <li><img src="banner-img/22.jpg" alt=""></li> <li><img src="banner-img/33.jpg" alt=""></li> <li><img src="banner-img/44.jpg" alt=""></li> <li><img src="banner-img/55.jpg" alt=""></li> </ul> <span id="left"><</span> <span id="right">></span> <div> <ul id="tag-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>到此，关于“如何用JavaScript实现轮播图效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
