您的位置：首页 > Web前端 > JQuery

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

2015-12-10 00:00 941 查看
本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

基于JQuery的实现图片轮播效果(焦点图)
基于jQuery的仿flash的广告轮播代码
基于jquery的图片轮播 tab切换组件
12款经典的白富美型―jquery图片轮播插件―前端开发必备
jQuery图片轮播的具体实现
利用jquery写的左右轮播图特效
JQuery 图片滚动轮播示例代码
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
原生js和jquery实现图片轮播特效
原生js和jquery实现图片轮播淡入淡出效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航