js无缝图片滚动轮播图

最新推荐文章于 2023-02-18 23:17:02 发布

m0_73247444

最新推荐文章于 2023-02-18 23:17:02 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/m0_73247444/article/details/126444261

版权

本文介绍了使用HTML构建基本结构，CSS设置基本样式，以及JavaScript编写和封装动画函数来创建无缝图片滚动轮播图的方法。

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

html基本结构

<div class="box">
    <ul class="banner">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <a href="javascript:;" class="btn prev">
        < </a>
            <a href="javascript:;" class="btn next">
        >
    </a>
            <ul class="dot">
            </ul>
</div>

css基本样式

* {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 500px;
        height: 300px;
        border: 2px dashed violet;
        position: relative;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
    }
    
    .banner {
        width: 500%;
        position: abs