原生javascript手写一个丝滑的轮播图

通过本文，你将学到:

• html
• css
• js

没错，就是html，css,js,现在是框架盛行的时代，所以很少会有人在意原生三件套，通过本文实现一个丝滑的轮播图，带你重温html,css和js基础知识。

为什么选用轮播图做示例？有如下几点:

• 业务当中最常用
• 轮播图说简单也不简单，说复杂也不复杂，可以说是一切项目的基石
• 轮播图更适合考察你对html，css,js的基础掌握

废话不多说，让我们先来看一下效果图，如下:

通过上图，我们可以知道，一个轮播图包含了三大部分，第一部分是轮播图的部分，第二部分则是轮播翻页部分，第三部分则是上一页和下一页。

所以一个轮播图的结构我们基本上就清晰了,让我们来详细看一下吧。

html文档结构

首先我们要有一个容器元素，如下:

<!--容器元素-->
<div class="carousel-box"></div> 

然后，我们第一部分轮播图也需要一个容器元素，随后就是轮播图的元素列表，结构如下:

 <div class="carousel-content"><div class="carousel-item active"><img src="https://www.eveningwater.com/img/segmentfault/1.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/2.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/3.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/4.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/5.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/6.png" alt="" class="carousel-item-img"></div><div class="carousel-item"><img src="https://www.eveningwater.com/img/segmentfault/7.png" alt="" class="carousel-item-img"></div>
</div> 

分析下来就三个，容器元素，每一个轮播图元素里面再套一个图片元素。

接下来是第二部分，同样的也是一个容器元素，套每一个轮播点元素，如下:

<div class="carousel-sign"><div class="carousel-sign-item active">0</div><div class="carousel-sign-item">1</div><div class="carousel-sign-item">2</div><div class="carousel-sign-item">3</div><div class="carousel-sign-item">4</div><div class="carousel-sign-item">5</div><div class="carousel-sign-item">6</div>
</div> 

无论是轮播图部分还是轮播分页部分，都加了一个active类名，作为默认显示和选中的轮播图和轮播分页按钮。

第三部分，则是上一页和下一页按钮，这里如果我们将最外层的轮播容器元素设置了定位，这里也就不需要一个容器元素了，我们直接用定位，下一节写样式会详细说明。我们还是来看结构，如下:

<div class="carousel-ctrl carousel-left-ctrl">&lt;</div>
<div class="carousel-ctrl carousel-right-ctrl">&gt;</div> 

这里采用了html字符实体用作上一页和下一页文本，关于什么是html字符实体，可以参考相关文章，这里不做详解。

通过以上的分析，我们一