上一家公司主要是做些微信的場景頁啥的，然后需要快速開發，所以第一時間選擇了swiper，畢竟開發快速，比較方便然后api多（雖然並沒有用很多），用這個的朋友。缺點的話有時候用了就曉得，下面開始講講，第一次寫，有啥不對的請大家指正，虛心學習。
這邊swiper的使用發法可以去官網看看，傳送門：http://www.swiper.com.cn
一般來說，H5場景開始有個loading吧，就建一個div，全屏的大小，可以加個loading動畫啥的，然后這就用到了預加載，您可以選擇一個合適的預加載js，比如relLoader.js。也可以自己寫一個方法
function _LoadImg(b, e) {
var c = 0,
a = {},
d = 0;
for (src in b) {
d++;
}
for (src in b) {
a[src] = new Image();
a[src].onload = function() {
if (++c >= d) {
e(a)
}
};
a[src].src = b[src];
}
}
_LoadImg([
'images/1-beijing.jpg',
'images/2-beijing.jpg',
],
function() {
var loader = document.getElementById('loading');
document.body.removeChild(loader);
});
下方是swiper動畫的js，官網拷貝下來的
<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隱藏動畫元素
swiperAnimate(swiper); //初始化完成開始動畫 },
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫
}
})
</script>
接下來你發現loading已經結束了，但是加在首屏的動畫為啥都不動了，其實人家在你loading的時候已經加載完成了，所以動畫已經執行了。
解決辦法很簡單的
setTimeout(function(){
swiperAnimate(swiper);
},1000);//初始化完成開始動畫
設置一個延遲，看看效果，這回就可以了。
問題：
部分iphone（比如iphone6p）手機打開H5會閃退。這些H5大部分都是微信端使用的，所以微信這位爺要好生照顧，之前微信是分為android和ios版，他們的內核都不一樣的，會些問題，很多人都收到過摧殘。原因有幾個吧加載的圖片啥的太多了，動畫過多吧或者H5的頁數很多，都是有可能的。
解決辦法呢：
就是預加載的時候加載少量的圖片
開啟swiper的懶加載lazyLoading設為true啊，這時html里面也要修改<img data-src="path/to/picture-1.jpg" class="swiper-lazy">
問題：
swiper沒法加兩個動畫，舉個栗子：你要div入場一個動畫，然后入場動畫執行完了這個div再循環執行一個小動畫，這個swiper沒法幫你哦，你要這個有個啥swiper.animate-twice.min.js的，可以去嘗試一下，但我覺得不好使。
解決辦法：事件監聽，監聽這個div，第一個動畫執行完成，然后給加上一個循環的動畫，所以有這個方法
var youxiu = document.getElementById("youxiu");
function setAni(obj,type,duration,delay,cName){
obj.addEventListener("webkitAnimationEnd",function(){
this.setAttribute("swiper-animate-effect",type);
this.setAttribute("swiper-animate-duration",duration);
this.setAttribute("swiper-animate-delay",delay);
this.className = cName;
swiperAnimate(mySwiper);
},false);
}
setAni(youxiu,"pulses","2s","0.3s","full swiper-lazy ani");
還有很多問題可以一起討論，發現寫這個也不是件簡單的事情，水平有限哈，請多多指教。祝大家工作順利！！