jQuery實現(xiàn)圖片漸入漸出切換展示效果

更新時間：2015年08月15日 09:55:32 作者：斯邁歐

這篇文章主要介紹了jQuery實現(xiàn)圖片漸入漸出切換展示效果,需要的朋友可以參考下

在這之前我們先看看我們要做的效果是什么樣的：

我們要圖片在過“一定時間”后自動切換，在右下角處有小方塊似數(shù)字1,2,3,4，這些數(shù)字是根據(jù)圖片的個數(shù)自動出現(xiàn)的，當(dāng)鼠標(biāo)經(jīng)過的時候數(shù)字顏色有一定的變化；

下面我們來看看具體怎么實現(xiàn)。

第一步：先寫簡單的html頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../js/jquery.js" ></script>
  <script type="text/javascript" src="scrollPic.js" ></script>
  <link rel="stylesheet" href="scrollPic.css">
</head>
<body>
  <div class="pic-slider-io">
    <ul>
      <li><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
    </ul>
  </div>  
</body>
</html>

頁面代碼解析：首先建立scrollPic.html,scrollPic.js,scrollPic.css。二話不說先把要的三個基本的文件建好；然后把它引入到html中在head頭部，其中注意

src="../js/jquery.js"
這個代碼的意思，“../”表示跳出上級目錄，然后在js文件夾下查找jquery.js文件；
在html頁面中，我們在body中添加一個class為'pic-slider-io'的div，在div中有一個ul，li下面有四張圖片，注意：圖片事先設(shè)置好命名，為1.jpg,2.jpg......方便在編寫scrollPic.js；
先看看這個時候什么都沒做的頁面樣式：

可以看到圖片是一原來的大小平鋪在頁面上的，一默認(rèn)ul li的方式展現(xiàn)在頁面上的；
現(xiàn)在我們要把它放在左下角；

第二步：編寫css樣式來控制它
首先控制div的展現(xiàn)：

.pic-slider-io{
  height : 200px;  //設(shè)置div的高為200px；
  width : 800px;　　//設(shè)置div的寬為800px；
  float : letf; 　　//float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
  position : relative;　　//position 屬性規(guī)定元素的定位類型.這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定　　　　　　　　　　　　　　　　//位元素會相對于它在正常流中的默認(rèn)位置偏移。relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。
  overflow : hidden; //overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情.hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
}

看一下頁面樣式：

看到所有圖片都在一起去了，圖片的本身大于div的寬高，所以overflow：hidden這個就把其他溢出的就不顯示了，不過這肯定不是我們想要的，不急繼續(xù)；
然后，我們現(xiàn)在控制ul的樣式：

.pic-slider-io ul{
  margin : 0px; //設(shè)置上下左右的外邊距都為0；
  padding : 0px;//設(shè)置上下左右的內(nèi)邊距都為0；  注意：margin,padding的設(shè)置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分別對應(yīng)的是上，右，下，左；
  height : auto;　　//自適應(yīng)高度，瀏覽器自動計算
  width : 100%;　　//寬度為100%
  list-style-type : none; 　　　　//把li的點去掉
  float : left;　　
  display : block;　　//此元素將顯示為塊級元素，此元素前后會帶有換行符
  position : absolute;//生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。
  top : 0;
  left : 0;
  z-index : 98;//z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
}

這個時候圖片就不顯示了，頁面看到的是把左上角那個點去掉了；

再次，我們控制li的樣式：

.pic-slider-io ul li {
  height: auto;
  width: 100%;
  float: left;
  padding: 0px;
  margin: 0px; 
  overflow: hidden;
  z-index:1; //這個li層就比ul那個疊層更高
}

這個樣式的設(shè)置主要是把li的疊層高于ul 就相當(dāng)于浮在ul上面；

最后，我們來看看img的樣式：

.pic-slider-io ul li img{ 
  width: 100%;
   z-index:1;//設(shè)置圖片和li在同一層上，這個應(yīng)該沒問題吧
}

現(xiàn)在我們來看看頁面成什么樣了：

看到，經(jīng)過樣式設(shè)置，整個圖片都顯示出來了；

第三步：編寫scrollPic.js
在編寫js的時候，我們要添加右下方的圖片數(shù)字顯示，我們事先把要添加的css寫好如下：

.pic-page-btn {//這是在父div中的子div樣式，用于顯示在右下角的數(shù)字承載模塊
  float: left;
  width: auto;
  height: 30px; 
  position: absolute; 
  bottom: 20px; 
  right: 20px;
  z-index: 99; //他的疊層比父級div還要高，把這個按鈕樣式放在圖片之上
}
.pic-page-btn span{ //這個是設(shè)置子div的數(shù)字樣式
  height: 30px;
  width: 30px;
  background-color: #999;
  display: block;
  float: left;
  line-height: 30px;
  text-align: center;
  color: #FFF;
  margin-right: 10px;
  cursor:pointer;
}
.pic-page-btn .current {//這是將要設(shè)置鼠標(biāo)滑過改變其背景顏色
  background-color: #1D5D76;
}

下面，我們來看看js的編寫，在這里不是視頻，就不一步一步的講了，我把各個解釋都注釋在js代碼中了

js代碼：

$(function(){
  $.scrollPic = function (options){ //定義了一個scrollPic函數(shù)，有一個傳參，用于調(diào)用；
     /************************開始整個默認(rèn)插件參數(shù)講解*******************************/
    //整個defaults以花括號包含的是默認(rèn)的參數(shù)，調(diào)用此插件的只需要修改ele，Time，autoscroll即可；
    var defaults={
      ele: '.pic-slider-io',   //pic-slider-io是一個class，css中定義了其樣式；
      Time : '2000',      //Time是定義了滑動的時間；
      autoscroll : true    //autoscroll設(shè)為true表示自動切換圖片；
    };
    /************************結(jié)束整個默認(rèn)插件參數(shù)講解*******************************/
    
    //$.extend({},defaults, option)有{}主要是為了創(chuàng)建一個新對象，保留對象的默認(rèn)值。
    var opts = $.extend({}, defaults, options);
    
    //$(opts.ele)可以理解為取這個執(zhí)行，與$('.class1').click();類似表示，然后理解為賦值給PicObject；
    //或者這樣理解,$(opts.ele)就是$('.pic-slider-io')，只不過（.pic-slider-io是個class作為參數(shù)，所以要(opts.ele)來表示）；
    var PicObject = $(opts.ele);
    
    //PicObject.find('ul')，這個可以理解成$(opts.ele).find('ul'),因為opts.ele其實就是取得的一個class，
    //相當(dāng)于$('.pic-slider-io').find('ul');然后賦值給scrollList，所以整個就用scrollList來表示他；
    var scrollList = PicObject.find('ul');
    
    //同理scrollList.find('li')可以表示為$('.pic-slider-io').find('ul').find('li');所以這個是一層一層來查找的如果你看到html就會更加清晰；
    var listLi = scrollList.find('li');
    
    //圖片的命名是1.jpg,2.jpg,這樣的，index是用來表示圖片的名字的初始化賦值為0；
    var index = 0;
    
    //這是定義一個picTimer(自動切換函數(shù))的函數(shù)；
    var picTimer;
    
    //一個li中包含一個圖片，所以這是查找有多少個圖片，賦值給len；
    var len = PicObject.find('li').length;
    
    /*****************開始自動切換函數(shù)************************/
    function picTimer(){
      showPic(index);//調(diào)用showPic(index)函數(shù)(在下面)
      index++;
      if(index == len){//如果index的值等于len，就表示從第一張圖片到最后一張圖片切換完了，然后是index賦值為0重新開始
        index=0;
      }
    }
    /*****************結(jié)束自動切換函數(shù)************************/
    
    
    //setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。
    //setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉
    //此判斷為如果autoscroll為true，則不停的調(diào)用picTimer函數(shù)，以Time的速度調(diào)用
    if(opts.autoscroll){
      var time = setInterval(picTimer,opts.Time);
    }
    
    
    /*****************開始動畫函數(shù)************************/
    function showPic(index){//定義動畫函數(shù)
      //listLi是找到第一個li，然后隱藏他，listLi在var listLi = scrollList.find('li');已經(jīng)介紹了
      listLi.hide();
      //fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。siblings()方法是遍歷。
      listLi.eq(index).fadeIn(500).siblings().hide();
      //找到paging對應(yīng)的css樣式，如果與當(dāng)前的index一致，則添加class為current的css樣式，否則就移除。
      PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
    }
    /*****************結(jié)束動畫函數(shù)************************/
    
    //這是在class為pic-slider-io的div中添加一個class為pic-page-btn的子div。
    //主要是設(shè)置右下角數(shù)字的承載
    PicObject.append('<div class="pic-page-btn"></div>');
    
    //在這個class為pic-page-btn的子div中添加圖片張數(shù)對應(yīng)的數(shù)字個數(shù)，1,2,3，，，，，
    //從這可以看出來，數(shù)字不是自己一個個添得，是根據(jù)li的個數(shù)，也就是圖片的個數(shù)自動生成的
    for( i=1;i<=len;i++){
      PicObject.find('.pic-page-btn').append('<span>'+i+'</span>');
    }
    
    //這個就是和上面講listLi一樣的
    var paging = PicObject.find('.pic-page-btn span');
    
    //為相應(yīng)的右下角的數(shù)字改變其背景顏色
    paging.eq(index).addClass('current');
    
  }
});

在這我們差不多完成了圖片的切換，

然后我們在html中先調(diào)用默認(rèn)的看一看：

調(diào)用方式：

<script type="text/javascript">
$(function(){
    $.scrollPic();
  }); 
</script>

看一下界面顯示：

看箭頭所示，說明可以自動切換了圖片；
可是我們還有當(dāng)鼠標(biāo)在右下角1,2,3,4上滑過的時候，可以切換圖片，所以我們就在js中加個事件就可以了：

  //鼠標(biāo)經(jīng)過1、2、3、4的效果
    PicObject.find(paging).mouseover(function(){
      index = PicObject.find(paging).index($(this));
      showPic(index); //調(diào)用showPic(index)函數(shù)。
    });
    //鼠標(biāo)經(jīng)過1、2、3、4的效果
    
    //清除計時器
    //當(dāng)鼠標(biāo)懸浮在1,2,3,4上面的時候，就相當(dāng)于要切換圖片了
    //所以我們就要清除計時器，重新來過了
    PicObject.hover(function(){
      clearInterval(time);//這個是相對于setInterva()的；
    },function(){
      if(opts.autoscroll){
        time = setInterval(picTimer,opts.Time);
      }else{
        clearInterval(time);
      }
    });

把這段代碼加如到j(luò)s中，加到什么位置就不要說了吧！加到

paging.eq(index).addClass('current');
后面就可以了；

這樣整個這個圖片切換的一個插件就算完成了；
如果需要調(diào)用函數(shù)，可以修改ele,Timer,autoscroll.
看一下帶參數(shù)使用插件：

<script type="text/javascript">
 $(function(){
    $.scrollPic({
      ele: '.pic-slider-io',  //插件應(yīng)用div
      Time:'3000',     //自動切換時間
      autoscroll:true,    //設(shè)置是否自動漸變
   });
  }); 
</script>

好了，整個插件的講述就算是完成了，希望大家可以從中學(xué)到知識，如有不足，還望諒解?。ㄗ詈笳f一句，在整個js的編寫時，最好在$(function(){});的最前面加個分號，防止與其他js沖突）

您可能感興趣的文章: