用Bootstrap轻松做渐隐式轮播

                                                          （作者：黄启浩  撰写时间：2019.01.19）

一个好的轮播可以提高网页的美观，下面我们就用Bootstrap来制作一个美观的轮播，淡入淡出的效果加持。Bootstrap是一个很强大的框架，灵活运用里面已封装好的类，小白也能轻松做出美观网页哦。

话不多说，先来吃代码结构图：最外大盒子的类为carousel和slide， 都是bootstrap封装好的类。

这是效果图：

整体分为三个部分：

1、底部颜色块按钮；类为carousel-indicators。某个li给它class="active"用于高亮显示。data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。data-slide-to将把滑块移动到一个特定的索引。

2、图片部分； 装图片的大盒子用carousel-inner类，而carousel-fade就是带有淡入淡出效果的一个类；装每一张图片的盒子就放一个carousel-item类；

3、前进和后退按钮；给class="carousel-control-prev"；然后给span加上class="carousel-control-prev-icon"就有了箭头图标了，href="#carouselIndicators"将图片作为链接，控制图片；

所以，想要做出渐隐式轮播，只需在有carousel-inner这个类的图片大盒子上加上bootstrap封装好的carousel-fade类就行了，是不是超级easy系列？！

---

感谢大家的浏览，如有疑问可在评论留言哦！