1 轮播图
轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它。轮播图最大的优点就是节约的空间——同一个地方会展示多页内容，使得主屏上的位置可以展示多页内容。虽然一次只展现一个页面，但它轮流播放的方式，在一定程度上缓解了用户的审美疲劳。
2 完成过程
轮播图的编写是非常常见的。在以前的编写过程中，利用过h5，小程序编写，但是在这样的编写过程中，需要将各种功能和代码，样式全部详细清晰的设置。而引用bootstrap封装样式，将在很大程度上减少代码。编写思路如下：
（1）首先需要制作一个div=” carousel Slider”, carousel是轮播插件，后面所有的东西都会放在这个div里面。SliderShow是vue的轮播图组件插件，它支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换。在这里可以为 slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。
（2）之后制作轮播图片播放区。这里将使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片。如下我们就将图片放进了播放区。
代码语言：javascript复制
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="img/1.jpeg" alt=""></a>
</div>
<div class="item">
<a href="##"><img src="img/2.jpeg" alt=""></a>
</div>
<div class="item">
<a href="##"><img src="img/3.jpeg" alt=""></a>
</div></div>（3）制作切换跳转按钮。这里只需要在与 carusel-inner 同级的区域使用 ol 或是 ul 元素指定与图片数量一样多的 li 标签就可以。这里需要特别注意 data-slide-to 属性。它用来传递某个帧的下标，比如 data-slide-to="1"，可以直接跳转到这个指定的第二个图片。因为下标从0开始计算的，同样定义在轮播图计数器的每个 li 上。
代码语言：javascript复制
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>（4）播放顺序是在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。在设置播放顺序的时候，我们利用了“<”“>”符号，来表示切换。这里引用了来自 Glyphicon Halflings 的字体图标。代码如下：
代码语言：javascript复制
<a class="left carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>这里还可以用js代码来实现这个功能，代码如下：
代码语言：javascript复制
<script type="text/javascript">
$(function(){
$("#slidershow").carousel({
interval:1000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
</script>效果如下：
图1 效果图
3 总结
按理说用bootstrap写轮播图，应该是比较简单的。但是在写作过程中，因为自己的粗心，犯了一个十分特别简单的问题。在引入图片的时候，把图片文件后缀Jpeg，写成了jpg。就因为这个图片一直没有办法显示，浪费的很多时间检查修改。所以说在平时的作业过程中，一定要小心谨慎。
