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

最新推荐文章于 2025-09-16 10:30:00 发布

原创

最新推荐文章于 2025-09-16 10:30:00 发布 · 572 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

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

<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 {