HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效

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

运行效果截图如下：

具体代码如下：

一、主体程序

轮播图①(手动点击轮播)

• 
• 
• 
• 

1

2

3

4

二、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程序设计有所帮助。