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

最新推荐文章于 2023-03-09 19:50:46 发布

joker.ma

最新推荐文章于 2023-03-09 19:50:46 发布

阅读量446

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45092792/article/details/90758098

版权

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

摘要由CSDN通过智能技术生成

第三种

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

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;