编程 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 相关文章推荐

讨论javascript(一)工厂方式 js面象对象的定义方法

Dec 15 Javascript

初识JQuery 实例一(first)

Mar 16 Javascript

7款吸引人眼球的jQuery/CSS3特效实例分享

Apr 25 Javascript

javascript闭包的高级使用方法实例

Jul 04 Javascript

特殊情况下如何获取span里面的值

May 20 Javascript

jQuery实现数秒后自动提交form的方法

Mar 05 Javascript

javascript中日期函数new Date()的浏览器兼容性问题

Sep 05 Javascript

JQuery标签页效果实例详解

Dec 24 Javascript

使用淘宝镜像cnpm安装Vue.js的图文教程

May 17 Javascript

js实现简单模态框实例

Nov 16 Javascript

页面内锚点定位及跳转方法总结（推荐）

Apr 24 Javascript

聊聊Vue 中 title 的动态修改问题

Jun 11 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