本文实例讲述了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="/UploadFiles/2021-04-02/picture01.jpg">

二、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图片轮播 JavaScript图片轮播 Bootstrap图片轮播

希望本文所述对大家学习jQuery程序设计有所帮助。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com