用原生js实现轮播图

最新推荐文章于 2024-07-24 21:47:58 发布

Ednah

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量6.2k

点赞数 3

分类专栏： Javascript 文章标签： web开发

本文链接：https://blog.csdn.net/Ednah/article/details/70832895

版权

本文介绍了如何使用原生JavaScript制作轮播图。基本原理是将所有图片放入一个div，通过改变div的left值实现图片切换。内容包括HTML、CSS和JS代码示例，以及如何设置切换按钮和小圆点。还提供了在线demo地址和轮播图的升级版，如动态生成小圆点和函数封装。

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

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。

1.基本原理

将所有图片并排放到一个div中，然后再放到展示窗口当中，让装有所有图片的div通过改变left值，从而左右移动实现图片切换。

2.html代码

<div id="container">
        <div id="list" style="left:-600px">
            <img src="images/5.jpg" alt="5" />
            <img src="images/1.jpg" alt="1" />
            <img src="images/2.jpg" alt="2" />
            <img src="images/3.jpg" alt="3" />
            <img src="images/4.jpg" alt="4" />
            <img src="images/5.jpg" alt="5" />
            <img src="images/1.jpg" alt="1" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" class="arrow" id="pre"><</a>
        <a href="javascript:;" class="arrow" id="next">></a>
    </div>

以一个有5张图片的轮播图为例，为了实现无缝滚动，需要在第一张图片前放置第五张图片，在第五张图片后放置第一