编程 Javascript

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

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

- Author -

Sunshine_lily

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

键盘 keycode的值 javascript时触发事件时很有用的要素

Nov 02 Javascript

js获取判断上传文件后缀名的示例代码

Feb 19 Javascript

jQuery中noconflict函数的实现原理分解

Feb 03 Javascript

JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

Aug 04 Javascript

jquery validate demo 基础

Oct 29 Javascript

简单介绍JavaScript数据类型之隐式类型转换

Dec 28 Javascript

js老生常谈之this,constructor ,prototype全面解析

Apr 05 Javascript

全面解析Javascript无限添加QQ好友原理

Jun 15 Javascript

jQuery简单实现iframe的高度根据页面内容自适应的方法

Aug 01 Javascript

vue+element UI实现树形表格带复选框的示例代码

Apr 16 Javascript

微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】

Jun 01 Javascript

解决Vue-cli无法编译es6的问题

Oct 30 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