本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考。具体如下： 运行效果截图如下：
具体代码如下：
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考。具体如下： 运行效果截图如下：
具体代码如下：
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
下面来看jQuery程序：
/定时自动轮播图片代码开始/
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
/定时自动轮播图片代码结束/
/鼠标悬浮图片停止轮播代码开始/
slideShow.hover(
function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
);
/鼠标悬浮图片停止轮播代码结束/
})
从上图可以看出开启定时器的代码是重复的，所以这里可以定义一个自动播放的函数autoPlay()来精简代码,经过精简后的代码如下：
定义完成后不要忘记调用这个函数，即autoPlay(); 那么最终版的jQuery程序如下：
/鼠标悬浮图片停止轮播代码开始/
slideShow.hover(
function(){
clearInterval(timer);
},autoPlay
);
/鼠标悬浮图片停止轮播代码结束/
})
以上就是本文的全部内容，大家可以结合下面这两篇文章进行学习：
文章二：jquery实现定时自动轮播特效
希望本文所述对大家学习jQuery程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。