微信小程序|利用carouse制作轮播图

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 轮播图

轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它。轮播图最大的优点就是节约的空间——同一个地方会展示多页内容，使得主屏上的位置可以展示多页内容。虽然一次只展现一个页面，但它轮流播放的方式，在一定程度上缓解了用户的审美疲劳。

2 完成过程

轮播图的编写是非常常见的。在以前的编写过程中，利用过h5，小程序编写，但是在这样的编写过程中，需要将各种功能和代码，样式全部详细清晰的设置。而引用bootstrap封装样式，将在很大程度上减少代码。编写思路如下：

（1）首先需要制作一个div=” carousel Slider”, carousel是轮播插件，后面所有的东西都会放在这个div里面。SliderShow是vue的轮播图组件插件，它支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换。在这里可以为 slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。

（2）之后制作轮播图片播放区。这里将使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片。如下我们就将图片放进了播放区。

</div>

</div>

</div></div>

（3）制作切换跳转按钮。这里只需要在与 carusel-inner 同级的区域使用 ol 或是 ul 元素指定与图片数量一样多的 li 标签就可以。这里需要特别注意 data-slide-to 属性。它用来传递某个帧的下标，比如 data-slide-to="1"，可以直接跳转到这个指定的第二个图片。因为下标从0开始计算的，同样定义在轮播图计数器的每个 li 上。

</ol>

（4）播放顺序是在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。在设置播放顺序的时候，我们利用了“<”“>”符号，来表示切换。这里引用了来自 Glyphicon Halflings 的字体图标。代码如下：

</a>

</a>

这里还可以用js代码来实现这个功能，代码如下：

$(function(){

$("#slidershow").carousel({

interval:1000

});

$("#slidershow a.left").click(function(){

$(".carousel").carousel("prev");

});

$("#slidershow a.right").click(function(){

$(".carousel").carousel("next");

});

</script>

效果如下：

微信小程序|利用carouse制作轮播图

图1 效果图

3 总结

按理说用bootstrap写轮播图，应该是比较简单的。但是在写作过程中，因为自己的粗心，犯了一个十分特别简单的问题。在引入图片的时候，把图片文件后缀Jpeg，写成了jpg。就因为这个图片一直没有办法显示，浪费的很多时间检查修改。所以说在平时的作业过程中，一定要小心谨慎。

END

主编 | 王文星

责编 | 刘连

where2go 团队

微信号：算法与编程之美

微信小程序|利用carouse制作轮播图

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

微信小程序|利用carouse制作轮播图

相关推荐