js实现无缝轮播（左右+小圆点）

ppx丶Lik-

于 2021-07-30 15:10:38 发布

阅读量543

点赞数 2

分类专栏： js 轮播图文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/Lik_ie/article/details/119248127

版权

本文介绍了如何使用JavaScript和CSS创建一个无缝轮播图，包括左右切换和小圆点导航功能。通过布局设置和JavaScript事件处理，实现了图片的平滑过渡和状态指示。

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

<style>
    .box {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        margin-top: 50px;
        overflow: hidden;
        position: relative;
        border: 3px solid red;
    }

    img {
        width: 300px;
        height: 300px;
        float: left;
    }

    .imgs {
        width: 1500px;
        height: 300px;
        position: absolute;
    }

    .pp {
        position: absolute;
    }

    .btn1 {
        display: inline-block;
        position: absolute;
        top: 140px;
        background-color: rgba(0, 0, 0, 0.5);
        color: pink;
        font-weight: 900;
    }

    .btn2 {
        display: inline-block;
        position: absolute;
        top: 140px;
        left: 280px;
        background-color: rgba(0, 0, 0, 0.5);
        color: pink;
        font-weight: 900;
    }

    .box ul {
        position: absolute;
        width: 300px;
        height: 50px;
        bottom: 0;
        left: 20%;

    }

    .box ul li {

最低0.47元/天解锁文章