jquery實現滑鼠懸浮停止輪播特效_jquery-js教程-PHP中文網

首頁

web前端

js教程

jquery實現滑鼠懸浮停止輪播特效_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

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="/static/imghwm/default1.png"  data-src="img/picture01.jpg"  class="lazy" / alt="jquery實現滑鼠懸浮停止輪播特效_jquery" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/picture02.jpg"  class="lazy" / alt="jquery實現滑鼠懸浮停止輪播特效_jquery" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/picture03.jpg"  class="lazy" / alt="jquery實現滑鼠懸浮停止輪播特效_jquery" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/picture04.jpg"  class="lazy" / alt="jquery實現滑鼠懸浮停止輪播特效_jquery" ></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程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn