原生JS代码做一个简单的轮播图

最新推荐文章于 2021-12-31 13:51:55 发布

原创

最新推荐文章于 2021-12-31 13:51:55 发布 · 924 阅读

5 ·

CC 4.0 BY-SA版权

这篇博客介绍如何用原生JavaScript实现一个简单的轮播图功能，包括自动轮播、点击按钮切换图片和小图片联动切换大图片。代码结构清晰，适合图片数量不多的情况，轮播图尺寸可自定义，并通过JS控制箭头的显示和隐藏。

以下代码都打完时，就会实现轮播功能

（1）图片自动轮播
（2）点击按钮时会切换图片
（3）点击小图片时，大图片也会相应的改变
此轮播图代码通俗易懂，如果图片不多则比较适合，对于整个轮播图片的宽度和高度可以随自己的需要而改变

1.htmls代码进行布局

<body onload="start()">  
<div class="chart">
    <img src="img/gg01.jpg" alt="" id="bg-img"/>
    <div class="box-imgs">
        <div class="box-img"><img src="img/gg01.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg02.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg03.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg04.jpg" alt="" class="img01"/></div>
    </div>
    <div class="left"> < </div>
    <div class="right"> > </div>
</div>
</body>