ADD file via upload

1 month ago · 496dfd1b28
parent bb0c86df59
commit 496dfd1b28
1 changed files with 153 additions and 0 deletions
--- a/自动轮播图.html
+++ b/自动轮播图.html
@ -0,0 +1,153 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>111</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1000px;
            height: 500px;
            /* overflow: hidden; */
            position: relative;
            margin: 0 auto;
            text-align: center;
            background-color: aqua;
        }
        img {
            width: 90%;
            height: 90%;
        }
        .left {
            position: absolute;
            background-color: #666;
            width: 30px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            top: 45%;
            left: 5px;
            cursor: pointer;
        }
        .right {
            position: absolute;
            background-color: #666;
            width: 30px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            top: 45%;
            right: 5px;
            cursor: pointer;
        }
        .slider-indictor {
            position: absolute;
            bottom: 15px;
            left: 50%;
            list-style: none;
            display: flex;
        }
        .slider-indictor li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        .slider-indictor li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
 </head>
 <body>
    <div class="box">
        <img src="./img/1.jpg" alt="">
        <div class="left"><</div>
                <div class="right">></div>
                <ul class="slider-indictor">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
        </div>
 </body>
 <script>
    //定义图片数组
    const imgs = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
    //获取img元素
    const img = document.querySelector('img')
    const left = document.querySelector('.left')
    const right = document.querySelector('.right')
    let i = 0
   let n= setInterval(() => {   
        i++
        if (i > imgs.length - 1) {
            i = 0
        }
        img.src = imgs[i]
        document.querySelector('.slider-indictor .active').classList.remove('active')
        document.querySelector(`.slider-indictor li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
    //鼠标经过关闭定时器
    const box=document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
        clearInterval(n)
    })
    //鼠标离开开启定时器
    box.addEventListener('mouseleave',function(){
        clearInterval(n)
        //开启定时器
        n= setInterval(() => {   
        i++
        if (i > imgs.length - 1) {
            i = 0
        }
        img.src = imgs[i]
        document.querySelector('.slider-indictor .active').classList.remove('active')
        document.querySelector(`.slider-indictor li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
    })
    left.addEventListener('click',function(){
            i--
            if(i<0){
                i=3
            }
            img.src=imgs[i]
            document.querySelector('.slider-indictor .active').classList.remove('active')
        document.querySelector(`.slider-indictor li:nth-child(${i + 1})`).classList.add('active')
        })
        right.addEventListener('click',function(){
            i++
            if(i>=imgs.length){
                i=0
            }
            img.src=imgs[i]
            document.querySelector('.slider-indictor .active').classList.remove('active')
        document.querySelector(`.slider-indictor li:nth-child(${i + 1})`).classList.add('active')
        })
 </script>
 </html>