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

本文描述了jquery实现鼠标悬浮和停止转盘的特效代码。分享给大家参考。具体如下：运行效果截图如下：

具体代码如下：

一、主程序

！doctype HTML HTML Head metachartset=' UTF-8 '/title轮播(手动单击轮播)/title Link Type=' text/CSS' rel='样式表' href=' CSS/layout . CSS '/Head body div class='幻灯片放映'！-图片布局开始-ullia href=' # ' img src=' http : img/picture 01 . jpg '/a/lilia href=' # ' img src=' http : img/picture 02 . jpg '/a/lilia href=' # '。img src=' http : img/picture 03 . jpg '/a/Li lia href=' # ' img src=' http : img/picture 04 . jpg '/a/Li/ul！-图片布局结束-！-按钮布局开始-div class=' shownav ' span class=' active ' 1/span span 2/span span 3/span span 4/span/div！-按钮布局结束-/div脚本src=' http : js/jquery-1 . 11 . 3 . js '/script script src=' http 3360 js/layout . js '/script/body/html ii。CSS样式。

* { margin : 0；padd : 0；} ul { list-style : none；}.幻灯片显示{ width: 346pxheight: 210px/*实际上是图片的高度*/border : 1px # eeei solid；margin: 100px自动；相对位置：飞越：隐藏；/*这里需要隐藏溢出框的图片部分*/}。幻灯片ul { width : 2000 px相对位置：/*这里需要注意的是，相对的：对象不能堆叠，而是会按照左、右、上、下等属性在正常的文档流中移动。没有此属性，图片不会左右移动*/}。幻灯片/*让四张图片向左浮动，形成并排的水平布局，方便点击按钮时向左移动*/width : 346 px；}.幻灯片。显示导航{ /*绝对定位布局数字按钮*/绝对位置：right: 10pxbottom: 5px文本对齐：居中；font-size : 12px；线高： 20px；}.幻灯片。showNav span{ cursor:指针；display:块；向左浮动：宽度： 20px；height: 20px背景技术# ff5a28边距-left : 2px；color: # fff}.幻灯片。显示导航。active { background: # b63e1a} 3.jQuery程序首先讲述了停止鼠标悬浮图片旋转的原理：

1.当鼠标悬停在框架上时，清除计时器，即clearInterval(计时器)关闭计时器，从而停止自动转盘。2.当鼠标离开框架时，重新启动计时器。3.通过悬停功能悬停(over，out)来悬停和离开鼠标，该功能模拟悬停事件(鼠标在对象上移动和移出)。这是一个自定义方法，它为经常使用的任务提供了“保持在其中”的状态。参数： over (Function) :鼠标移动到要在元素上触发的函数。Out(函数):鼠标移出元素时触发的函数。

让我们看看jQuery程序：

$(文档)。ready(function(){ var slide=$(')。幻灯片显示')，//获取最外面一帧的名称ul=幻灯片显示. find ('ul ')，shownumber=幻灯片显示. find('。shownavspan ')，//获取按钮onewidth=幻灯片显示。//获取每个图片的宽度var timer=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。当用户打开网页时，首先显示第一张图片，即索引值为0。/*手动点击按钮启动图片轮播代码*/shownumber.on ('click '，function(){//绑定一个Click事件$ (this)。addclass ('active ')。兄弟姐妹()。//点击按钮时，给该按钮增加高亮状态，去掉其他按钮的高亮状态。var索引=$(this)。index()；//获取点击了哪个按钮，即查找被点击按钮的索引值iNow=indexUl。animate({ ' left ' :-one width * inow，//注意这里使用了left属性，所以position: relative需要在ul的样式中设置；让ul向左移动n个图片的宽度，其中n是根据被点击按钮的索引值iNow确定的)})；/*手动点击按钮完成图片轮播码*//*定时自动启动图片轮播码*/timer=set interval(function(){//打开timer iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000是轮播的时间/*定时自动轮播的代码结束*//*鼠标暂停图片开始时轮播的代码停止*/slide . hover(function(){ clearinterval(timer)；}，function(){ timer=set interval(function(){//打开timer iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000为轮换时间})；/*鼠标暂停图片停止轮播代码*/})从上图可以看出，启动定时器的代码是重复的，所以这里可以定义一个autoplay函数autoPlay()来精简代码。精简后的代码如下：

/*定时启动自动轮播图片代码*/函数autoplay(){ timer=set interval(function(){//Open timer iNow；//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000是轮换时间} autoPlay()；/*定期自动旋转图片的代码结束*/定义完成后别忘了调用这个函数，即autoPlay()；最终的jQuery程序如下：

$(文档)。ready(function(){ var slide=$(')。幻灯片显示')，//获取最外面一帧的名称ul=幻灯片显示. find ('ul ')，shownumber=幻灯片显示. find('。shownavspan ')，//获取按钮onewidth=幻灯片显示。//获取每个图片的宽度var timer=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。当用户打开网页时，首先显示第一张图片，即索引值为0。/*手动点击按钮启动图片轮播代码*/shownumber.on ('click '，function(){//绑定一个Click事件$ (this)。addclass ('active ')。兄弟姐妹()。//点击按钮时，给该按钮增加高亮状态，去掉其他按钮的高亮状态。var索引=$(this)。index()；//获取点击了哪个按钮，即查找被点击按钮的索引值iNow=indexUl。animate({ ' left ' :-one width * inow，//注意这里使用了left属性，所以position: relative需要在ul的样式中设置；让ul向左移动n个图片的宽度，其中n是根据被点击按钮的索引值iNow确定的)})；/*手动点击按钮完成图片轮播码*//*定时自动启动图片轮播码*/函数autoplay(){ timer=set interval(function(){//打开定时器iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000是轮换时间} autoPlay()；/*定期结束自动轮播代码*//*通过鼠标暂停图片开始轮播代码*/幻灯片显示. hover(function(){ clearinterval(timer))；}，autoPlay)；/*鼠标挂起图片停止轮播代码*/})以上就是本文的全部内容，结合以下两篇文章可以了解到：

第一条：jQuery手动点击实现照片轮播的特效。

第二条：jquery实现了定时自动轮播的特效。

精彩话题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播。

希望本文对大家学习jQuery编程有所帮助。