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


Posted in Javascript onAugust 20, 2020

本文实例讲述了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="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>
  <!--图片布局结束-->
  
  <!--按钮布局开始-->
  <div class="showNav">
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  </div>
  <!--按钮布局结束-->
 </div>
 <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图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 #Javascript
jquery实现定时自动轮播特效
Dec 10 #Javascript
jQuery手动点击实现图片轮播特效
Apr 20 #Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 #Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 #Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 #Javascript
You might like
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php制作简单模版引擎
2016/04/07 PHP
javascript 简练的几个函数
2009/08/29 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
node.js获取参数的常用方法(总结)
2017/05/29 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
电大自我鉴定
2013/10/27 职场文书
教师师德承诺书
2014/03/26 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
护士求职简历自我评价
2015/03/10 职场文书
六年级数学教学反思
2016/02/16 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang