原生js实现轮播图的两种方式

引言

element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果。

1.基础轮播图实现过程

1.1 基础样式配置

分析实现轮播的基本要素，固定容器，图片，切换circle, 以及当前的活跃样式.active, 最终得到以下基础样式：

代码部分：

<div class="containter">
    <div class="imageBox">
        <img class="imageItem" src="./image/ftai-bg.png" alt="">
        <img class="imageItem" src="./image/ftai-home2.png" alt="" >
        <img class="imageItem" src="./image/bg.png" alt="">
        <img class="imageItem" src="./image/ftai-home.png" alt="">
    </div>
    <div class="circleBox">
        <span class="circleItem active" ></span>
        <span class="circleItem">