一个简单的滑动动画广告项目

公司接了一个当下很火热的，网上有各类模板和造好轮子付费使用的滑动广告的项目。
网上的模板大部分相似于PPT，并且文字量很大，大部分都是文字的淡入/淡出效果，想作一个稍微复杂点的。

研究了一下，采用了swiper.js+animate.css的方案，而swiper.js的官网上正好有Swiper Animate这个小插件，支持在Swiper内快速制做CSS3动画效果，完美！

研究了一下官网提供的示例（http://www.swiper.com.cn/usag...），其核心是，在slide内的元素的类名加上'ani'，而后加入几个动画的属性值，而后提供两个方法swiperAnimateCache()和swiperAnimate()，供swiper初始化和页数滑动是触发动画。其中核心方法是swiperAnimate()，笔者猜想方法里应该是先取出本slide里的全部类名含有'ani'的元素，运用jq的data方法取出动画的三个属性值，而后加上以触发css3动画。

因为整个项目的全部图片+音乐加一块儿总共有6M之大，因此必需要加入loading动画才行。去github上搜到了imagesloaded这个库，功能很强大，能够监测img标签的载入，也能监测div的背景图片的载入，用JQ选择全部的图片类，加入一个imagesLoaded方法就搞定了。

问题出现了，因为以前的swiper类是加载完成就直接开始播放动画，因此在loading隐藏后，首页的动画就播放的差很少了，怎么样让swiper知道在loading完后再播放动画呢？

示例中提供的swiperAnimate()的方法中有一个swiper参数，console.log出来后发现跟swiper实例自己包含的方法和属性类似，因此写出代码

mySwiper.Init = function () {
    swiperAnimate(this); 
};

将动画播放代码独立成一个函数，在初始化时不执行，在loading结束后执行。

这样写完后发现动画仍是照旧，而后发现首次进入页面，依然会触发一次onSlideChangeEnd事件，因此加入判断，若是非第一次进入第一页，且页数不为1时，触发动画，任务完成！

多设备的匹配，一开始采用的是flexible方案，这是以前的程序员留给个人方案，我以前没有仔细思考过实现，就按照他的方法使用了下来，后来发如今各类设备上呈现的效果千奇百怪。而后去翻了flexible的文档，发现其大概是一种仿vw的实现方式，就是监测当前设备的宽度，而后除以10，写在body的font-size属性里，这样就能够用rem模仿vw使用了。这种匹配方式用在web app里是合适的，里面有合适的文档流和浮动能够很方便的完成效果，对比例的要求也不高。但是在本项目中，须要适配的是一张张铺满全屏的图片。研究了一会MDN后，我把全部图片的background-size属性改成100% 100%填充满DIV，而后$('.swiper-container').css({"width": document.body.clientWidth, "height": document.body.clientHeight})将div铺满屏幕，后面的定位经过百分比完成，完成了多设备的适配工做，这样作的缺点是在大屏环境下，如PAD，PC端会铺满窗口，很丑，不过此次的应用场景主要是微信端，还作了微信登陆验证，因此就忽略了。

最后是一个小bug，swiper虽然铺满了屏幕，但是右边会留下一条白边，若是往右拉是能看到白边的，我经过hammer.js取消了panleft和panright的动做，解决了这一问题。

当初给本身的时间是2天，结果由于需求变更和各类各样的缘由，整个项目花了五天时间才完成并部署上线，中间学到了不少，特此写下心得，供之后的本身参考。