目前各大商城中应用到非常多的特效，让网站看起来非常绚丽，对于广告版位的特效更是别出心裁，其中多图切换的广告非常实用；续9月的前端任务“多格带切换的焦点图”，进一步把这个效果应用到项目中，结合BI4.7的广告版位系统(PS：重点是广告系统，不限版本)+SuperSlider+Masonry实现天猫商城首页的多图广告切换效果，在这里将制作原理及思路分享给大家！

不带切换的多图广告


带切换的多图广告


要实现上图只需满足2个条件：瀑布流、切换，然后再系统的广告版位功能就能实现自由控制了。

一：瀑布流
瀑布流的优点在于：
1、布局简单，没有特别的难点；
2、不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
瀑布流布局的缺点：
1、列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
2、滚动加载更多数据时，还要指定插入到第几列中，不够方便。
3、只有高级浏览器中才能使用；
4、数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；鉴于这些主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

在这里我们需要应用的布局必须是支持任意的列，能自适应高宽，要实现这样的效果，必须了解瀑布流的原理，以最小单位一滴水为例，当一滴水分为2滴或多滴的时候，必须等分，即图片必须是等宽或倍宽。在这里我们是借用jquery masonry的瀑布流插件来实现的。

二：切换
这里superSlide来做切换效果，其实结构非常简单、直观

三：广告版位
使用系统自有的广告系统非常方便
注：在制作图片的时候一定要注意图片的宽度和高度一定要等分，例：总宽度为800px，如果是分为2列，该屏图片的宽度统一是400px，如果分为5列，该图片的宽度160px，高度也是一样的方式；当宽度没计算精准时，就达不到想像中的效果。

首先按广告位的大小创建一个广告版位


然后按广告切换的屏数分别创建多个相同设置的版位


每个版位对应上传相关的广告图片，然后按权重排序(PS：权重高排在前，排序非常重要)

四：模板&标签
模板：advZoneId为对应广告版位的ID

标签：标签的写法非常简单，只有一个列的结构，读取PE_AdZone的内容，由"焦点图切换-广告.config"简化而来。
"
由于标签内容比较多，这里就截了一张简洁的结构图

到这一步已基本上完工了，上几张效果图









从这些效果图，大家应该已经看出其中的规律了，每一屏中的小图片的宽度都同或倍宽的。高度同样也是相同或倍高的。

介绍了这么多，现在就直接来看最终的效果吧

演示+下载地址~~~