原生js轮播图 transform方法！

最新推荐文章于 2024-12-12 16:09:21 发布

猿来如此hhh

最新推荐文章于 2024-12-12 16:09:21 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： js css css3 html

本文链接：https://blog.youkuaiyun.com/xiaobaijava123/article/details/117868606

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

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

小白的我又来啦！！！

下面呢给大家整一下轮播图不考虑兼容性的情况下用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>

    </