Html+CSS+JS轮播图：手动轮播，自动轮播_emm_10_01

网络投稿 02-07 3825

演示效果

轮播图代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .banner { width: 500px; height: 300px; position: relative; /* border: 1px solid red; */ margin: 100px auto; } .banner .wrap { width: 100%; } .banner .wrap .item { width: 100%; } .item img { width: 500px; height: 300px; vertical-align: top; position: absolute; } .div1 { position: absolute; left: 0; top: 50%; transform: translatey(-50%); cursor: pointer; width: 41px; height: 69px; font-size: 30px; line-height: 70px; text-align: center; color: #D6D8D4; background-color: rgba(0, 0, 0, 0.3); } .div2 { position: absolute; right: 0; top: 50%; transform: translatey(-50%); cursor: pointer; width: 41px; height: 69px; font-size: 30px; line-height: 70px; text-align: center; color: #D6D8D4; background-color: rgba(0, 0, 0, 0.3); } .pagenation { position: absolute; /* border: 1px solid red; */ left: 50%; transform: translateX(-50%); display: flex; bottom: 40px; } .pagenation>div { width: 10px; height: 10px; border-radius: 50%; background-color: white; margin-right: 10px; cursor: pointer; } .pagenation>div:last-child { margin-right: 0; } </style> </head> <body> <div class="banner"> <div class="warp"> <div class="item"><img src="./img/1.jpg" alt=""></div> <div class="item"><img src="./img/2.jpg" alt=""></div> <div class="item"><img src="./img/3.jpg" alt=""></div> <div class="item"><img src="./img/4.jpg" alt=""></div> </div> <div class="div1"> <</div> <div class="div2 ">> </div>  <div class="pagenation"> <div id="pagenation-item0"></div> <div id="pagenation-item1"></div> <div id="pagenation-item2"></div> <div id="pagenation-item3"></div> </div> </div> <script> var index = 0; //定义初始下标 var banner = document.getElementsByClassName("banner")[0]; var itemList = document.getElementsByClassName("item"); var pagenationList = document.querySelectorAll(".pagenation>div"); var pagenation = document.querySelector(".pagenation"); itemList[0].style.opacity = 1; pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色 var up = document.getElementsByClassName("div1")[0]; var next = document.getElementsByClassName("div2")[0]; //下一张图片（封装方便下面自动播放定时器调用） function nextFn() { index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; //图片透明度为0图片隐藏 pagenationList[i].style.background = "white " //图片没显现小圆点的颜色为白色 } itemList[index].style.transition = "opacity 1s ease .2s" itemList[index].style.opacity = 1; //图片透明度为1图片显现 pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色 } next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片 up.onclick = function () { //上一张（点击事件）点击切换上一张图片 index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; pagenationList[i].style.background = "white" } itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果 itemList[index].style.opacity = 1; pagenationList[index].style.background = "blue" } //设置定时器，自动向下播放图片 var t1 = setInterval(nextFn, 2000) banner.onmouseover = function () { clearInterval(t1); } banner.onmouseout = function () { t1 = setInterval(nextFn, 2000) } // 事件委托 pagenation.onclick = function (event) { event = window.event || event console.log(event); if (event.target.className == "pagenation") { console.log("点击的是父元素"); } else { var id = event.target.id; var photoIndex = null; for (var i = 0; i < pagenationList.length; i++) { pagenationList[i].style.background = "white" if (id.indexOf(i) >= 0) { photoIndex = i; } } event.target.style.background = "blue" index = photoIndex; // 将小圆点对应的下标与图片下标对应 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; } itemList[index].style.transition = "opacity 1s ease .2s" itemList[photoIndex].style.opacity = 1; } } </script> </body> </html>

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签： #自动轮播