轮播

                                                      轮播

开发工具与关键技术：DW、VS HTML（css）、JavaScript
作者：木林森
撰写时间：2019年5 月 1日

很多网站在展示商品的时候都需要用到图片，但是如果将图片一张张展示出来，那就需要用到很大的篇幅，而且消费者也容易产生审美疲劳，不利于商品的销售。如果能够让图片变成电视那样播放起来，这不仅能够减少图片占据的空间，还能产生一种神秘感，让消费者看到后有一种想要了解的欲望，然后主动进店购买商品。在这里能让图片像电视剧那样播放的效果叫做轮播。轮播效果的实现可以在DW中HTML写，也可以在VS中写，两者都能达到同样的效果，也都各有各的优势和不足。
在HTML中我们可以先设置一个大盒子放图片和按钮组，再在盒子里面分别放一个大盒子和一盒小盒子，分别放置图片和按钮组。再创建一个css设置轮播图需要的样式。例子一如下：
图1为HTML代码部分，图二为效果图（点击左右或小按钮都可以切换图片，也可以自动切换）：

图1

图2
在VS中也是先创建一个大盒子，优势在于它不需要设置按钮组，但需要注意下面两点：1、外层元素的 class=“layui-carousel” 用来标识为一个轮播容器 ；2、内层元素的属性 carousel-item 用来标识条目。它跟HTML比起来，优势在于不用设置按钮组，图片放多少都不需要你去计算容器的宽度，而且小按钮会根据图片的数量自动匹配对应的数量，也不需要自己写JavaScript代码部分，只需引用layui准备好的js文件就行，
例子二如下：
图3为放置5张图片时的代码和效果（注意右边效果中的小按钮数量）：

图3
图4为放置9张图片时的代码和效果（注意右边效果中的小按钮数量）：

图4
从5张图的轮播和9张图的轮播来看，除了添加的图片数量不同，其他的代码是一模一样，所以在layui添加图片方面是存在绝对优势的，还有一个较为突出的优势就是，通过方法：carousel.set(options) 来设定全局基础参数，也可以通过核心方法：carousel.render(options) 来对轮播设置基础参数。下面用核心方法：carousel.render(options) 来切换动画的方式，效果如图5，代码如图6

图5 图6
结合上面两个例子，我们可以清楚的看到在VS中用layui写轮播效果要比在DW的HTML中写要方便得多，而且例一中还没有展示出CSS部分及JS部分的代码，而例二却已经展示完所有的代码了。所以综合两者的特点，个人比较推荐使用VS中用layui写轮播的方法。
虽然在便捷方面layui轮播会占优势，但毕竟它是一个模板，模板也就说明了它的机械性，所以在轮播的样式方面它会处于劣势，而在HTNL中写就可以比较自由、灵活的去设置自己喜欢的样式。因为每个人喜欢的东西都大相径庭，所以要根据客户的需求去选择要使用的方法，这样就可以避免浪费时间了，但前提是都要熟练掌握这两种方法才能做到，所以在搬砖的道路上好好努力吧。