公司接手了一个现在很火的项目。网上有各种模板和付费滑动广告项目。网上的模板大多类似PPT，文字量大。其中大多数是文本淡入/淡出效果。我想做一个稍微复杂一点的。经过一番研究，我采用了swiper.js+animate.css的方案，而swiper.js官网正好有一个小插件叫SwiperAnimate，支持在Swiper中快速制作CSS3动画效果，这是完美的！研究了官网提供的例子（http://www.swiper.com.cn/usag...），核心是在幻灯片中元素的类名中加上'ani'，然后加上几个animations属性值，然后提供两个方法swiperAnimateCache()和swiperAnimate()用于swiper初始化和页码滑动触发动画。核心方法是swiperAnimate()。笔者猜测该方法应该是先把这张幻灯片中所有类名包含'ani'的元素取出来，用jq的data方法取出动画的三个属性值，然后添加触发CSS3动画。由于整个项目的所有图片+音乐一共6M，所以需要加一个loading动画。我在github上找到了imagesloaded库。它非常强大。可以监控img标签的加载和div的背景图片。使用JQ选择所有图片类别，添加一个imagesLoaded方法即可完成。问题来了，因为之前的swiper类是加载完成后直接开始播放动画，所以隐藏loading之后，首页的动画播放的差不多了，如何让swiper知道加载完之后播放动画加载完成？示例中提供的swiperAnimate()方法有一个swiper参数。console.log出来后，发现和swiper实例本身包含的方法和属性类似，所以写代码mySwiper.Init=function(){swiperAnimate(this);};将动画播放代码分离成一个函数，初始化时不执行，加载完成后执行。这样写完后发现动画还是一样，然后发现第一次进入页面还是会触发onSlideChangeEnd事件，所以加上判断，如果不是第一次进入就先页，页数不为1，触发动画，任务完成！对于多设备匹配，一开始采用的是灵活的方案。这是之前的程序员留给我的解决方案。之前没有仔细考虑实现，就照着他的方法用了。后来发现可以在各种设备上显示。效果千奇百怪。然后又去看flexible的文档，发现大概是vw-like的实现，就是监听当前设备的宽度，然后除以10，写在body的font-size属性里，这样就可以用remup来模仿vw了。这种搭配方式适合在webapp中使用，适当的使用文档流和浮动就可以轻松达到效果，而且对比例的要求不高。但是在这个项目中，需要适配的是一张覆盖全屏的图片。研究了一段时间MDN，把所有图片的background-size属性改为100%100%来填充DIV，然后$('.swiper-container').css({"width":document.body.clientWidth,"height":document.body.clientHeight})填充屏幕上的div，后续定位按百分比进行，完成多设备适配。这样做的缺点是在大屏环境下，比如PAD，PC端会很丑，不过这次的应用场景主要在微信端，微信登录验证也做了，所以它被忽略了。最后，还有一个小bug。虽然滑动条遮住了屏幕，但是右边会有白边。如果向右滑动，您可以看到白色边框。我通过hammer.js取消了panleft和panright的动作来解决这个问题。一个问题。一开始我给自己2天的时间，但是由于需求的变化和各种原因，整个项目用了5天的时间才完成并部署上线。过程中收获良多，特此写下心得，以备日后参考。
