| 本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
javascript实现点击按钮切换图片
Vue项目中token验证登录(前端部分) |
