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

赞 (0)

相关推荐

  • jquery实现的可隐藏重现的靠边悬浮层实例代码

    本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码,保存到html文件可查看效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • jQuery鼠标悬浮链接弹出跟随图片实例代码

    jQuery鼠标悬浮链接弹出跟随图片实例代码

    本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0

  • jQuery实现的简单悬浮层功能完整实例

    jQuery实现的简单悬浮层功能完整实例

    本文实例讲述了jQuery实现的简单悬浮层功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jQuery简单实现页面元素置顶时悬浮效果示例

    本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(wi

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • 自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&quo

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

  • jquery悬浮提示框完整实例

    本文实例讲述了jquery悬浮提示框实现方法.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { x = 5; y = 15; $("p").hover

  • jQuery实现悬浮在右上角的网页客服效果代码

    jQuery实现悬浮在右上角的网页客服效果代码

    本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码.分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错.默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-top-wen-online-demo/ 具体代码如下: <!DOCTYP

  • 鼠标悬浮显示二级菜单效果的jquery实现

    1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

随机推荐