3种轮播方式的轮播图

最新推荐文章于 2024-07-16 17:18:30 发布

...:...:...

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量144

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/cycyzh/article/details/140444314

版权

功能

点击左右块实现轮播
点击底下小圆点实现轮播
自动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .dad{
            width: 462px;
            height: 320px;
            overflow: hidden;
            border: 10px dashed red;
            margin: 0 auto;
            position: relative;
        }
        .dad img{
            width: 462px;
            height: 270px;
            display: none;
            position:absolute ;
            left: 0;
            top: 0;
        }
        .dad img.on{
            display: block;
        }
        .dad .turn{
            position: absolute;
            bottom: 2px;
            width: 150px;
            height: 30px;
            background-color: green;
            left: 156px;
        }
        .turn div{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;
            background-color: yellow;
        }
        .dad .turn .hh{
            background-color: red;
        }
        .l,.r{
            width: 30px;
            height: 50px;
            position: absolute;
            top: 110px;
            background-color: rgb(157, 252, 4);
            z-index: 100;
        }
        .r{
            position: absolute;
            right: 0;
        }
        .l:active,.r:active{
            background-color: rgb(245, 4, 212);
        }
    </style>
</head>
<body>
    <div class="dad">
           <div class="l"></div><!--左边按钮-->
           <!--图片-->
           <img src="../img/喵1.jpg" class="on">
           <img src="../img/喵2.jpg">
           <img src="../img/喵3.jpg">
           <img src="../img/喵4.jpg">
           <img src="../img/喵5.jpg">   
           <!--小圆点-->
           <div class="turn">
                <div class="hh"></div> 
                <div></div> 
                <div></div> 
                <div></div> 
                <div></div> 
           </div>
           <div class="r"></div><!--右边按钮-->
    </div>
    <script>
       let img=document.querySelectorAll(".dad img")//图片
       let btn=document.querySelectorAll(".dad .turn div") //圆点
       let index=0  //全局变量
       let ll=document.querySelector(".dad .l")//左边的按钮
       let rr=document.querySelector(".dad .r")//右边的按钮
    //通过清除与增加类名来展示
       function show(){
                document.querySelector(".dad .turn .hh").classList.remove("hh")
                btn[index].classList.add("hh") 
                document.querySelector(".dad .on").classList.remove("on")
                img[index].classList.add("on")
       }
       //左边按钮
       ll.addEventListener("click",()=>{
            index--
            if(index<0){
                index=img.length-1
            }
            show()
        })
        //右边按钮
        rr.addEventListener("click",()=>{
            auto()
        })
        //小圆点点击事件
       for (let j = 0; j < btn.length; j++) {
            btn[j].addEventListener("click", ()=>{
                index=j
                show()
            })
        }
        //自动播放步骤1
        function auto(){
            index++
            if(index>btn.length-1){
                index=0
            }
            show()
        }
        //自动播放步骤2
        setInterval(auto,3500)
    </script>
</body>
</html>