關於移動端使用swiper做圖片文字輪播的思考

最近做移動端網頁的時候，需要在首頁添加一個公告的模塊，用來輪播公告消息標題並且能鏈接到相應的詳情頁面，最開始用的是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;
        });
     })();
})

這樣代碼就可以正常在客戶端運行了，通過測試還挺靈敏的呢！