关于移动端使用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;

        });

     })();

})

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