公司接了一个当下很炽热的，网上有种种模板和造好轮子付费运用的滑动广告的项目。
网上的模板大部分类似于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天，效果由于需求更改和林林总总的缘由，全部项目花了五天时候才完成并布置上线，中心学到了许多，特此写下心得，供今后的本身参考。