JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放

最新推荐文章于 2022-12-04 10:35:59 发布

巧仔要早睡

最新推荐文章于 2022-12-04 10:35:59 发布

阅读量3.2k

点赞数 5

分类专栏：曲鬼鬼的学习文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_44875828/article/details/109226645

版权

该博客详细介绍了如何使用JavaScript、HTML和CSS来创建一个具有自动轮播、左右切换、小圆点导航功能的京东风格轮播图。内容包括静态效果图展示，以及CSS、HTML和JavaScript代码实现细节。

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

JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放

静态效果图如下：

CSS部分

*{
            margin: 0;
            padding: 0;
        }
        body{
            user-select: none;
        }
        .banner{
            position: relative;
            width: 384px;
            height: 470px;
            margin: 50px auto;
        }
        .ban-image{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .ban-image img{
            opacity: 0;
            position: absolute;
            transition:1s;
        }
        .ban-image img.on{
            opacity: 1;
        }
        .btn-left,.btn-right{
            position: absolute;
            top: 30%;
            width: 45px;
            margin-top: -30px;
            background-color: rgba(0, 0,0, 0.5);
            font-size: 18px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            cursor: pointer;
        }
        .btn-left{
            left:0px;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }
        .btn-right{
            right:0px;
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .tab{
            position: absolute;
            bottom: 180px;
            left: 15%;
            transform: translateX(-50%);
        }
        .tab li{
            float: left;
            list-style: none;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        .tab li.on{
            background-color: #f70;
        }

HTML部分

<div class="banner">
        <div class="ban-image">
            <a href="javascript:;"></a><img class="on" src = "images/1.jpg.webp" alt="" width="384"></a>
            <a href="javascript:;"></a><img src = "images/2.jpg.webp" alt="" width="384"></a>
            <a href="javascript:;"></a><img src = "images/3.jpg.webp" alt="" width="384"></a>
            <a href="javascript:;"></a><img src = "images/4.jpg.webp" alt="" width="384"></a>
            <a href="javascript:;"></a><img src = "images/5.jpg.webp" alt="" width="384"></a>
        <div class="btn">
            <div class="btn-left">&lt;</div>
            <div class="btn-right">></div>
        </div>
        <div class="tab">
            <ul>
                <li class="on"></li>
                <li></li>
                <li></li>