jquery实现鼠标悬浮停止轮播特效

本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：
一、主体程序

<！DOCTYPE html><html><head><meta charset="utf-8" /><title>轮播图①（手动点击轮播）</title><link type="text/css" rel="stylesheet" href="css/layout.css" /></head><body><div class="slideShow"><！--图片布局开始--><ul><li><a href="#"><img src="img/picture01.jpg" /></a></li><li><a href="#"><img src="img/picture02.jpg" /></a></li><li><a href="#"><img src="img/picture03.jpg" /></a></li><li><a href="#"><img src="img/picture04.jpg" /></a></li></ul><！--图片布局结束--><！--按钮布局开始--><div class="showNav"><span class="active">1</span><span>2</span><span>3</span><span>4</span></div><！--按钮布局结束--></div><script src="js/jquery-1.11.3.js"></script><script src="js/layout.js"></script></body></html>

二、CSS样式

*{margin: 0;padding: 0;}ul{list-style: none;}.slideShow{width: 346px;height: 210px; /*其实就是图片的高度*/border: 1px #eeeeee solid;margin: 100px auto;position: relative;overflow: hidden;/*此处需要将溢出框架的图片部分隐藏*/}.slideShow ul{width: 2000px;position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/}.slideShow ul li{float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/width: 346px;}.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/position: absolute;right: 10px;bottom: 5px;text-align:center;font-size: 12px;line-height: 20px;}.slideShow .showNav span{cursor: pointer;display: block;float: left;width: 20px;height: 20px;background: #ff5a28;margin-left: 2px;color: #fff;}.slideShow .showNav .active{background: #b63e1a;}

三、jQuery程序
先说一下鼠标悬浮图片轮播停止的原理：

1、当鼠标悬浮在框架上方时，清除定时器即用clearInterval（timer）关闭定时器，使自动轮播停止
2、当鼠标离开框架上方时，重新启动定时器
3、鼠标的悬浮和离开借助于hover函数

hover（over,out）一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
over （Function） : 鼠标移到元素上要触发的函数。
out （Function）: 鼠标移出元素要触发的函数。
下面来看jQuery程序：

$（document）.ready（function（）{var slideShow=$（".slideShow"）, //获取最外层框架的名称ul=slideShow.find（"ul"）, showNumber=slideShow.find（".showNav span"）,//获取按钮oneWidth=slideShow.find（"ul li"）.eq（0）.width（）;//获取每个图片的宽度var timer=null;//定时器返回值，主要用于关闭定时器var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0/*手动点击按钮进行图片轮播代码开始*/showNumber.on（"click",function（）{//为每个按钮绑定一个点击事件 $（this）.addClass（"active"）.siblings（）.removeClass（"active"）;//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉var index=$（this）.index（）; //获取哪个按钮被点击，也就是找到被点击按钮的索引值iNow=index;ul.animate（{"left":-oneWidth*iNow,//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定}）}）;/*手动点击按钮进行图片轮播代码结束*//*定时自动轮播图片代码开始*/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（）来精简代码,经过精简后的代码如下：

/*定时自动轮播图片代码开始*/function autoPlay（）{timer=setInterval（function（）{//打开定时器iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片if（iNow>showNumber.length-1）{//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始iNow=0;}showNumber.eq（iNow）.trigger（"click"）;//模拟触发数字按钮的click},2000）;//2000为轮播的时间}autoPlay（）; /*定时自动轮播图片代码结束*/

定义完成后不要忘记调用这个函数，即autoPlay（）;
那么最终版的jQuery程序如下：

$（document）.ready（function（）{var slideShow=$（".slideShow"）, //获取最外层框架的名称ul=slideShow.find（"ul"）, showNumber=slideShow.find（".showNav span"）,//获取按钮oneWidth=slideShow.find（"ul li"）.eq（0）.width（）;//获取每个图片的宽度var timer=null;//定时器返回值，主要用于关闭定时器var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0/*手动点击按钮进行图片轮播代码开始*/showNumber.on（"click",function（）{//为每个按钮绑定一个点击事件 $（this）.addClass（"active"）.siblings（）.removeClass（"active"）;//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉var index=$（this）.index（）; //获取哪个按钮被点击，也就是找到被点击按钮的索引值iNow=index;ul.animate（{"left":-oneWidth*iNow,//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定}）}）;/*手动点击按钮进行图片轮播代码结束*//*定时自动轮播图片代码开始*/function autoPlay（）{timer=setInterval（function（）{//打开定时器iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片if（iNow>showNumber.length-1）{//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始iNow=0;}showNumber.eq（iNow）.trigger（"click"）;//模拟触发数字按钮的click},2000）;//2000为轮播的时间}autoPlay（）;/*定时自动轮播图片代码结束*//*鼠标悬浮图片停止轮播代码开始*/slideShow.hover（function（）{clearInterval（timer）;},autoPlay）;/*鼠标悬浮图片停止轮播代码结束*/}）

以上就是本文的全部内容，大家可以结合下面这两篇文章进行学习：
文章一：jQuery手动点击实现图片轮播特效
文章二：jquery实现定时自动轮播特效
希望本文所述对大家学习jQuery程序设计有所帮助。