1 轮播图
轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它。轮播图最大的优点就是节约的空间——同一个地方会展示多页内容，使得主屏上的位置可以展示多页内容。虽然一次只展现一个页面，但它轮流播放的方式，在一定程度上缓解了用户的审美疲劳。
2 完成过程
轮播图的编写是非常常见的。在以前的编写过程中，利用过h5，小程序编写，但是在这样的编写过程中，需要将各种功能和代码，样式全部详细清晰的设置。而引用bootstrap封装样式，将在很大程度上减少代码。编写思路如下：
（1）首先需要制作一个div=” carousel Slider”, carousel是轮播插件，后面所有的东西都会放在这个div里面。SliderShow是vue的轮播图组件插件，它支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换。在这里可以为 slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。
（2）之后制作轮播图片播放区。这里将使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片。如下我们就将图片放进了播放区。
<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 上。
<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 的字体图标。代码如下：
<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代码来实现这个功能，代码如下：
<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。就因为这个图片一直没有办法显示，浪费的很多时间检查修改。所以说在平时的作业过程中，一定要小心谨慎。
