通过本文,你将学到:
- html
- css
- js
没错,就是html,css,js,现在是框架盛行的时代,所以很少会有人在意原生三件套,通过本文实现一个丝滑的轮播图,带你重温html,css和js基础知识。
为什么选用轮播图做示例?有如下几点:
- 业务当中最常用
- 轮播图说简单也不简单,说复杂也不复杂,可以说是一切项目的基石
- 轮播图更适合考察你对html,css,js的基础掌握
废话不多说,让我们先来看一下效果图,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/951f60f05f407857cdbbe3d6bba296f9.png)
通过上图,我们可以知道,一个轮播图包含了三大部分,第一部分是轮播图的部分,第二部分则是轮播翻页部分,第三部分则是上一页和下一页。
所以一个轮播图的结构我们基本上就清晰了,让我们来详细看一下吧。
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"><</div>
<div class="carousel-ctrl carousel-right-ctrl">></div>
这里采用了html字符实体用作上一页和下一页文本,关于什么是html字符实体,可以参考相关文章,这里不做详解。
通过以上的分析,我们一