jquery实现鼠标悬浮停止轮播特效
前端之家收集整理的这篇文章主要介绍了
jquery实现鼠标悬浮停止轮播特效，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
具体代码如下：
一、主体程序
轮播图①（手动点击轮播）
<div class="showNav">
<span class="active">1
2
3
4
二、CSS样式
图片的高度*/
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程序：
/
手动点击按钮进行图片轮播代码开始/
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()来精简代码,经过精简后的代码如下：
showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播
效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
autoPlay();
/*定时
自动轮播
图片代码结束*/
定义完成后不要忘记调用这个函数，即autoPlay();
那么最终版的jQuery程序如下：
/
定时自动轮播图片代码开始/
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程序设计有所帮助。
