这次给大家带来jquery实现鼠标操作悬浮轮播效果，jquery实现鼠标操作悬浮轮播效果的注意事项有哪些，下面就是实战案例，一起来看一下。
具体代码如下：
一、主体程序
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图①（手动点击轮播）</title>
<link type="text/css" rel="stylesheet" href="css/layout.css" />
</head>
<body>
<p 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>
<!--图片布局结束-->
<!--按钮布局开始-->
<p class="shownav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
<!--按钮布局结束-->
</p>
<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实现鼠标操作悬浮轮播效果的详细内容。