关于移动端使用swiper做图片文字轮播的思考

最近做移动端网页的时候，需要在首页添加一个公告的模块，用来轮播公告消息标题并且能链接到相应的详情页面，最开始用的是swiper插件，在安卓上测试完全没有问题，但是在苹果机上就没有那么灵敏了，来回切换首页和详情页的时候就会出现轮播的卡顿，甚至停播的现象，反复测试的时候问题更甚，搜了很多资料没有查到相关的解决方法，据说可能跟系统缓存相关，但是也没有具体的说法，考虑到此处的轮播不用手动滑动，只需实现自动轮播和跳转的功能，现在换成了用纯jQuery实现效果：

　　<div class="banner">
    　　<ul>//轮播内容
        　　<li><a href="#"><img src="data:images/1.png" alt=""></a></li>
        　　<li><a href="#"><img src="data:images/2.png" alt=""></a></li>
        　　<li><a href="#"><img src="data:images/3.png" alt=""></a></li>
        　　<li><a href="#"><img src="data:images/4.png" alt=""></a></li>
        　　<li><a href="#"><img src="data: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;
        });
     })();
})

这样代码就可以正常在客户端运行了，通过测试还挺灵敏的呢！