摘要：
最近，在制作移动网页时，您需要在主页上添加一个公告模块，以轮流广播公告消息标题并链接到相应的详细信息页面。一开始，你使用的是刷卡器插件，在Android上测试时完全没有问题，但在Macintosh上就不那么敏感了。当您在主页和详细信息页面之间来回切换时，旋转将被卡住，甚至停止。当你反复测试时，问题就更糟了，我搜索了很多资料，没有找到相关的解决方案。据说可能与系统缓存有关，但没有具体说法。考虑到这里的转盘不需要手动滑动，它只需要是自动的
最近做移动端网页的时候，需要在首页添加一个公告的模块，用来轮播公告消息标题并且能链接到相应的详情页面，最开始用的是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; }); })(); })
这样代码就可以正常在客户端运行了，通过测试还挺灵敏的呢！