最近做移動端網頁的時候,需要在首頁添加一個公告的模塊,用來輪播公告消息標題並且能鏈接到相應的詳情頁面,最開始用的是swiper插件,在安卓上測試完全沒有問題,但是在蘋果機上就沒有那么靈敏了,來回切換首頁和詳情頁的時候就會出現輪播的卡頓,甚至停播的現象,反復測試的時候問題更甚,搜了很多資料沒有查到相關的解決方法,據說可能跟系統緩存相關,但是也沒有具體的說法,考慮到此處的輪播不用手動滑動,只需實現自動輪播和跳轉的功能,現在換成了用純jQuery實現效果:
<div class="banner"> <ul>//輪播內容 <li><a href="#"><img src="images/1.png" alt=""></a></li> <li><a href="#"><img src="images/2.png" alt=""></a></li> <li><a href="#"><img src="images/3.png" alt=""></a></li> <li><a href="#"><img src="images/4.png" alt=""></a></li> <li><a href="#"><img src="images/5.png" alt=""></a></li> </ul> <ol>//角標 <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div>
相應的html布局根據需要設置成自己的樣式
$(function(){ ;(function(){ var timer=null; var num=0; var zin=100; function autoplay(){ clearInterval(timer); timer=setInterval(function(){ num++; zin++; if(num>4){num=0;} $('.banner_in ul li').hide().eq(num).fadeIn(); $('.banner_in ul li').eq(num).css('z-index',zin); $('.banner_in ol li').eq(num).addClass('current').siblings().removeClass('current'); },2000) } //自動播放 autoplay(); //鼠標移上暫停 $('#banner').hover(function(e) { clearInterval(timer); },function(){ autoplay(); }); //鼠標移上切換 $('.banner_in ol li').mouseover(function(e) { zin++; $(this).addClass('current').siblings().removeClass('current'); var index=$(this).index(); $('.banner_in ul li').stop().hide().eq(index).fadeIn(); $('.banner_in ul li').eq(index).css('z-index',zin); num=index; }); })(); })
這樣代碼就可以正常在客戶端運行了,通過測試還挺靈敏的呢!