原生js轮播图 transform方法！

原创

于 2021-06-13 09:41:25 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #css3 #html

本文主要介绍在不考虑兼容性的情况下，如何使用原生JavaScript的transform方法实现轮播图效果。通过HTML结构和CSS基础设置，结合带有注释的JS代码，详细阐述轮播图的实现过程。

小白的我又来啦！！！

下面呢给大家整一下轮播图不考虑兼容性的情况下用transform操作的方法！

不多说直接上代码！

首先是我们的结构基本上都是大同小异！！！

   <div class="banner">
        <!-- //轮播图 -->
        <ul>
            <li><img src="img/f3.jpg" alt=""></li>
            <li><img src="img/f1.jpg" alt=""></li>
            <li><img src="img/f2.jpg" alt=""></li>
            <li><img src="img/f3.jpg" alt=""></li>
            <li><img src="img/f1.jpg" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>

然后呢是我们的c3

* {
            margin: 0;
            padding: 0;
        }
        
        .banner

最低0.47元/天解锁文章