轮播图！！

最新推荐文章于 2024-07-12 01:09:29 发布

会上树的老张

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量141

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_45557130/article/details/127833076

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        /* 垂直对齐文本顶部 */
        img{
            vertical-align: top;
        }
        /* 取消表单的默认格式 */
        ul{
            list-style: none;
        }
        /* 设置宽高，外边距，居中 */
        .outer{
            width: 846px; 
            height: 472px;
            margin: 100px auto;
            position: relative;

        }
        /* 设置表单高度和盒子一样 */
        .img-list{
            height: 472px;
        }
        /* 绝对定位 */
        .img-list li{
            position: absolute;
            /* 设置图片淡出效果 */
            opacity: 0;
            transition: opacity 1s; 
        }
        /* 层级，让第一张图片显示在最上层 */
        li.current{
            z-index: 1;
            opacity: 1;
        }

        /* 设置两个箭头的样式 */
        .prev-next a{
            font-size: 60px;
            color: white;
            font-weight: bold;
            text-decoration: none;
            position: absolute;
            height: 60px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 2;
            opacity: .5;
        }
        #next{
            right: 0;
        }
        .prev-next a:hover{
            opacity: 1;
        }

        /* 导航点样式 */
        .dot{
            display: flex;
            justify-content: center;
            margin: auto;
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            bottom: 5px;

        }
        .dot a{
            width: 20px;
            height: 20px;
            margin: 10px;
            border-radius: 50%;
            background-color: white;
            opacity: .5;
        }
        .dot a:hover{
            opacity: 1;
        }
        .dot .active{
            opacity: 1;
        }
        

    </style>
</head>
<body>
    <div class="outer">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="./imgs/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./imgs/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./imgs/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./imgs/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./imgs/5.jpg" alt=""></a></li>
        </ul>

        <div class="prev-next">
            <a id="prev" href="javascript:;"><</a>
            <a id="next" href="javascript:;">></a>
        </div>
        <!-- 导航点 -->
        <div class="dot">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>

    </div>
    

    <script>
        /* 自动切换图片 */
        let timer = null
        const toggleChange =(function(){
             return ()=>{
            if(timer === null){
                timer = setTimeout(function auto(){
                changeImg("next")
                timer = setTimeout(auto,3000)
            },3000)
            }else{
                clearTimeout(timer)
                timer = null
            }
        }
        })()

        toggleChange()
        
        //鼠标进入后停止自动轮播
        // 获取outer
        const outer = document.getElementsByClassName("outer")[0]
        outer.onmouseenter =()=>{
            toggleChange()
        }
        outer.onmouseleave = ()=>{
            toggleChange()
        }

        /* 点击按钮切换图片 */
        const prev = document.getElementById("prev")
        const next = document.getElementById("next")
        prev.onclick = ()=>{
            changeImg("prev")
        }
        next.onclick = ()=>{
            changeImg("next")
        }

        /* 
            获取5个点
        */
       const dots = Array.from(document.querySelectorAll(".dot a")) 
       document.addEventListener("click",(event)=>{
            const index = dots.indexOf(event.target)
            if(index !==-1){
                //index为要切换到的图片的索引
                changeImg(index)

            }
            
       })

        //用来切换图片和点的函数 dir切换图片的方向 
        function changeImg(dir){
            let next
            const imgArr=Array.from(document.querySelectorAll(".img-list li"))
            //获取当前显示的图片
            const current = document.querySelector(".img-list .current") //获取img-list里面的current，避免混淆
           
            if(dir == "next"){
                //获取下一个图片
                next = current.nextElementSibling || imgArr[0]
            }else if(dir == "prev"){
                //获取上一个图片
                next = current.previousElementSibling || imgArr.at(-1)
            }else if(typeof(dir) ==="number"){
                //要切换到的图片
                next = imgArr[dir]
            }
            //获取当前要显示的图片的索引
            const index = imgArr.indexOf(next)

            //切换显示状态
            current.classList.remove("current")
            next.classList.add("current")

            //切换active
            const currentActive = document.querySelector(".active")
            currentActive.classList.remove("active")

            //获取当前要显示的小点
            dots[index].classList.add("active")
        }
    </script>
</body>
</html>