透明版的轮播图
作者：互联网
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.box { width: 400px; height: 300px; margin: 40px auto; position: relative; /* overflow: hidden; */ background-color: #ddd; } img { width: 400px; height: 300px; }
.box ul li { width: 400px; height: 300px; text-align: center; line-height: 300px; font-size: 40px; font-weight: bold; border: 1px solid #000; position: absolute; top: 0;
opacity: 0; transition: 2s; } .box ul .on { opacity: 1; }
.box ol { position: absolute; bottom: 0; display: flex; justify-content: center; }
.box ol li { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #f00; margin: 10px; transition: 2s; }
.on { background-color: #f00; }
p { position: absolute; width: 30px; height: 30px; top: 0; bottom: 0; margin: auto; background-color: pink; } #prev { left: 0; } #next { right: 0; } </style> </head> <body> <div class="box"> <ul> <li class="on"> <img src="./images/1.jpg" alt="" /> </li> <li> <img src="./images/2.jpg" alt="" /> </li> <li> <img src="./images/3.jpg" alt="" /> </li> <li> <img src="./images/4.jpg" alt="" /> </li> </ul> <p id="prev"></p> <p id="next"></p> <ol> <li class="on"></li> <li></li> <li></li> <li></li> </ol> </div>
<script> var t, index = 0; var flag = true; var oUlLis = document.querySelectorAll("ul li"); var oOlLis = document.querySelectorAll("ol li"); var oBox = document.querySelector(".box"); var prev = document.querySelector("#prev"); var next = document.querySelector("#next"); autoplay(); // window.onfocus=()=>{ // autoplay() // } // window.onblur=()=>{ // clearInterval(t) // } next.onmouseover = function () { clearInterval(t); }; prev.onmouseover = function () { clearInterval(t); console.log(1); }; oBox.onmouseover = function () { clearInterval(t); }; oBox.onmouseout = function () { autoplay(); }; //上一页按钮 prev.onclick = function () { clearInterval(t); index--; if (index < 0) { index = oUlLis.length - 1; }
showOne(); autoplay(); }; //下一页按钮 next.onclick = function () { clearInterval(t); index++; if (index ==oUlLis.length) { index = 0; } showOne(); autoplay(); }; //自动播放,定时器t要定义一个全局变量 function autoplay() { clearInterval(t); t = setInterval(() => { index++; if (index == oUlLis.length) { index = 0; } showOne(); }, 2000); } //表示的是小圆圈的颜色的切换,遍历数组ol function showOne() { oUlLis.forEach((val, i) => { val.classList.remove("on"); oOlLis[i].classList.remove("on"); }); oUlLis[index].classList.add("on"); oOlLis[index].classList.add("on"); } </script> </body> </html>
.box { width: 400px; height: 300px; margin: 40px auto; position: relative; /* overflow: hidden; */ background-color: #ddd; } img { width: 400px; height: 300px; }
.box ul li { width: 400px; height: 300px; text-align: center; line-height: 300px; font-size: 40px; font-weight: bold; border: 1px solid #000; position: absolute; top: 0;
opacity: 0; transition: 2s; } .box ul .on { opacity: 1; }
.box ol { position: absolute; bottom: 0; display: flex; justify-content: center; }
.box ol li { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #f00; margin: 10px; transition: 2s; }
.on { background-color: #f00; }
p { position: absolute; width: 30px; height: 30px; top: 0; bottom: 0; margin: auto; background-color: pink; } #prev { left: 0; } #next { right: 0; } </style> </head> <body> <div class="box"> <ul> <li class="on"> <img src="./images/1.jpg" alt="" /> </li> <li> <img src="./images/2.jpg" alt="" /> </li> <li> <img src="./images/3.jpg" alt="" /> </li> <li> <img src="./images/4.jpg" alt="" /> </li> </ul> <p id="prev"></p> <p id="next"></p> <ol> <li class="on"></li> <li></li> <li></li> <li></li> </ol> </div>
<script> var t, index = 0; var flag = true; var oUlLis = document.querySelectorAll("ul li"); var oOlLis = document.querySelectorAll("ol li"); var oBox = document.querySelector(".box"); var prev = document.querySelector("#prev"); var next = document.querySelector("#next"); autoplay(); // window.onfocus=()=>{ // autoplay() // } // window.onblur=()=>{ // clearInterval(t) // } next.onmouseover = function () { clearInterval(t); }; prev.onmouseover = function () { clearInterval(t); console.log(1); }; oBox.onmouseover = function () { clearInterval(t); }; oBox.onmouseout = function () { autoplay(); }; //上一页按钮 prev.onclick = function () { clearInterval(t); index--; if (index < 0) { index = oUlLis.length - 1; }
showOne(); autoplay(); }; //下一页按钮 next.onclick = function () { clearInterval(t); index++; if (index ==oUlLis.length) { index = 0; } showOne(); autoplay(); }; //自动播放,定时器t要定义一个全局变量 function autoplay() { clearInterval(t); t = setInterval(() => { index++; if (index == oUlLis.length) { index = 0; } showOne(); }, 2000); } //表示的是小圆圈的颜色的切换,遍历数组ol function showOne() { oUlLis.forEach((val, i) => { val.classList.remove("on"); oOlLis[i].classList.remove("on"); }); oUlLis[index].classList.add("on"); oOlLis[index].classList.add("on"); } </script> </body> </html>
标签：box,index,透明版,轮播,function,clearInterval,height,var 来源： https://www.cnblogs.com/czb1218/p/14659500.html