使用原生js实现轮播图

最新推荐文章于 2023-02-28 16:15:07 发布

尔东陈Czy

最新推荐文章于 2023-02-28 16:15:07 发布

阅读量201

点赞数

文章标签： javascript html css vscode

本文链接：https://blog.csdn.net/weixin_44425388/article/details/126122144

版权

本文介绍了如何使用原生JavaScript创建轮播图，包括HTML页面结构的设置、CSS样式的应用，以及两种JavaScript代码实现小圆点点击切换图片的方法：一是通过循环添加点击事件；二是利用冒泡机制绑定容器点击事件。文章旨在记录学习过程，欢迎大家交流讨论。

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

1、HTML页面结构

页面结构无其他可说的，注意img标签放入自己所需的图片即可。

<div id="banner">
        <ul class="img-list">
            <li><img src="./images/1.jpeg" alt=""></li>
            <li><img src="./images/2.jpeg" alt=""></li>
            <li><img src="./images/3.jpeg" alt=""></li>
            <li><img src="./images/4.jpeg" alt=""></li>
        </ul>
        <div class="arrow">
            <a href="javascript:;" class="prev"> < </a>
            <a href="javascript:;" class="next"> > </a>
        </div>

        <ul class="circle-list">
            <li class="circle active"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>
</div>

2、CSS样式

轮播图居中方式很多，这里仅供参考。

<style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style-type: none;
        }

        #banner {
            position: absolute;
            top: calc(50% - 200px);
            left: calc(50% - 400px);
            width: 800px;
            height: 40