标签：box index 透明版 轮播 function clearInterval height var
<!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,index,透明版,轮播,function,clearInterval,height,var 来源： https://www.cnblogs.com/czb1218/p/14659500.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。