用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)