轮播第五遍

最新推荐文章于 2024-07-18 17:34:14 发布

weixin_47207556

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量69

点赞数

分类专栏：其他文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_47207556/article/details/120431685

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

轮播都第五遍了大哥！终于熟练写轮播了（老母亲都留下了欣慰的泪水）
在这里插入图片描述
终于在我对轮播的执着下，很熟练的写出轮播了
“小二，上代码”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播5</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            position: relative;
            margin: 50px auto 0;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 1200px;
            height: 400px;
            overflow: hidden;

        }
        .imgList{
            display: flex;
            align-items: center;

        }
        .img{
            width: 1200px;
            height: 400px;
            display: none;
        }
        .img.current{
            display: block;
        }
        .dots{
            display: flex;
            position: absolute;
            top: 95%;
            left: 48%;
        }
        .dot{
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: #777777;
            margin: 0 5px;
            cursor: pointer;

        }
        .dot.cur{
            background-color: #aaaaaa;
        }

    </style>
</head>
<body>

    <div class="container">
        <div class="imgList">
            <img class="img current" src="../images/lunbo1.jpg"/>
            <img class="img " src="../images/lunbo2.jpg"/>
            <img class="img" src="../images/lunbo3.jpg"/>
            <img class="img" src="../images/lunbo5.jpg"/>
        </div>
        <div class="dots">
            <div class="dot cur"></div>
            <div class="dot "></div>
            <div class="dot "></div>
            <div class="dot "></div>
        </div>
    </div>
    <script>
        const imgList=document.querySelectorAll(".img");
        const dots=document.querySelectorAll(".dot");
        const len=imgList.length;
        
        //关键
        for (let i = 0; i <len ; i++) {
            imgList[i].setAttribute("index",i);
            dots[i].setAttribute("index",i);
            dots[i].addEventListener("click",dotClick);

        }
        //获得初始显示的元素
        let currentImg=document.querySelector(".current");
        let currentDot=document.querySelector(".cur");
        
        //小原点的单击方法
        function dotClick() {
            if (this.getAttribute("index")===currentDot.getAttribute("index")) return;
            currentImg.classList.remove("current");
            currentDot.classList.remove("cur");
            let thisIndex=this.getAttribute("index");
            imgList[thisIndex].classList.add("current");
            dots[thisIndex].classList.add("cur");
            
            //更新不能丢
            currentDot=document.querySelector(".cur");
            currentImg=document.querySelector(".current");
        }
        //更换图片方法
        function changeImg() {
            let currentIndex=currentImg.getAttribute("index");
            for (let i = 0; i <len ; i++) {
                imgList[i].classList.remove("current");
                dots[i].classList.remove("cur");
            }
            imgList[(++currentIndex)%len].classList.add("current");
            dots[currentIndex%len].classList.add("cur");

            //更新不能丢
            currentImg=document.querySelector(".current");
            currentDot=document.querySelector(".cur");
        }
        setInterval(changeImg,2000);

    </script>
</body>
</html>

weixin_47207556

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播第五遍

轮播都第五遍了大哥！终于熟练写轮播了（老母亲都留下了欣慰的泪水）终于在我对轮播的执着下，很熟练的写出轮播了“小二，上代码”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播5</title> <style> *{ padding: 0;
复制链接

扫一扫