JS-案例-三种轮播图写法（三）

最新推荐文章于 2024-10-24 14:34:56 发布

joker.ma

最新推荐文章于 2024-10-24 14:34:56 发布

阅读量473

点赞数 1

CC 4.0 BY-SA版权

分类专栏：案例文章标签： JS 轮播图

本文链接：https://blog.youkuaiyun.com/qq_45092792/article/details/90758098

案例专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript编写的轮播图实现方法，包括CSS样式布局、HTML结构设计，以及通过JavaScript处理初始状态、左右按钮和小圆点的点击事件，实现在点击时动态改变大图和小圆点的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第三种

点击左右按钮（下方小圆点）移动类型

CSS编写样式，JS构建函数事件

CSS样式

 <style>
        *{margin:0;
            padding: 0;}
        .carousel{
            width: 960px;
            height: 320px;
            position: relative;
            margin: auto;
            overflow: hidden;
        }

        .imgCon{
            width: 4800px;
            height: 320px;
            position: absolute;
            left: 0;
            font-size: 0;
            transition: all 2s;
        }

        .imgCon img{
            width: 960px;
            height: 320px;

        }

        .dot{
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 385px;
        }

        .dot>li{
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border:1px solid red;
            background: rgba(255,0,0,0);
            float: left;
            margin-left:20px;

        }
        .dot>li:nth-child(1){
            background: rgba(255,0,0,0.6);
        }

        .leftBn,.rightBn{
            position: absolute;
            top: 130px;
        }

        .leftBn{
            left: 20px;
        }

        .rightBn{
            right: 20px;
        }
    </style>

HTML结构

    <div class="carousel">
        <div class="imgCon">
            <img src="img/a.jpeg" alt="">
            <img src="img/b.jpeg" alt="">
            <img src="img/c.jpeg" alt="">
            <img src="img/d.jpeg" alt="">
            <img src="img/e.jpeg" alt="">
        </div>
        <ul class="dot">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <img src="img/left.png" alt="" class="leftBn">
        <img src="img/right.png" alt="" class="rightBn">
    </div>

初始状态函数，获取imgCon，lis给左右按钮小圆点添加点击事件

 <script>
        var imgCon,pre,lis;
        var position=0;
        init();
        function init() {
            imgCon=document.querySelector(".imgCon");
            lis=document.getElementsByTagName("li");
            var leftBn=document.querySelector(".leftBn");
            var rightBn=document.querySelector(".rightBn");
            leftBn.addEventListener("click",clickHandler);
            rightBn.addEventListener("click",clickHandler);
            for (var i=0;i<lis.length;i++){
                lis[i].addEventListener("click",dotclickHandler);
            }
            pre=lis[0];
        }

左右按钮的点击事件函数

 function clickHandler(e) {
            if(this.className==="leftBn"){
                position--;
                if (position<0)position=4;
            }else{
                position++;
                if (position>4)position=0;
            }
            imgMove();
        }

小圆点的点击事件函数

        function dotclickHandler(e) {
            var arr=Array.from(lis);
            position=arr.indexOf(this);
            imgMove();
        }

大图变换，及小圆点背景色变换函数

        function imgMove() {
            imgCon.style.left=-position*960+"px";
            if (pre){
                pre.style.backgroundColor="rgba(0,0,0,0)";
            }
            pre=lis[position];
            pre.style.backgroundColor="rgba(255,0,0,0.6)"
        }
    </script>