其他分享
首页 > 其他分享> > 透明版的轮播图

透明版的轮播图

作者:互联网

<!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