最近做移动端网页的时候,需要在首页添加一个公告的模块,用来轮播公告消息标题并且能链接到相应的详情页面,最开始用的是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; }); })(); })
这样代码就可以正常在客户端运行了,通过测试还挺灵敏的呢!