2013年4月5日 星期五

【jQuery】使用jQuery ui中的show Effects自製照片輪播

照片輪播其實網路上也一樣有很多套件可以用,這次公司設計同事需求:

除了照片輪播,上方還要顯示幾之幾(目前第幾張 / 總張數)。

這樣的需求,網路上仍然找的到套件,但由於我不是很理解設計同事卡在哪個點不喜歡那個套件,所以還是得試著自己寫出一個,不管是照片list或是幾之幾區塊都用div包附,最後設計同事可以自行調整div的css樣式與位置,而我這邊就是提供js輪播語法與大圖html結構規則。

線上看範例請點我




執行前思考:

以往的大圖輪播效果,若是由我這邊去套套件,其時我也都只是找到效果、查看範例,直接套用在我們這邊的版面上,沒有真的實際去查看套件內的js(而且大部分都很大包,實在很懶的研究 囧),但是大部分的輪播效果,就我這邊看起來,都很像是將所有的照片list並排成一列後,每次去執行橫向位移一段特定距離來達成輪播效果。

原本也希望自己也能用這樣的邏輯方式去執行,但一想到要計算位移位置就覺得很懶
(對 我很懶>"<),所以換了個方式執行。



實際執行邏輯:

  • 包附照片list的div命名規則化,例如id=pic1~pic8設定其編號。
  • 採用javascript中的setInterval方法,讓固定時間內重複執行以下動作。
  • 在傳入每次要執行滑行動作的編號時,先預設將所有照片div設為隱藏並層級設為最低。
  • 但前一張額外改成顯示不隱藏。
  • 將這次要執行滑行動作的的圖檔打開顯示並層級設為最高。
  • 將這次要執行滑行動作的的圖檔套用滑行語法,並重設下一張的編號供setInterval使用。
  • 本次滑行效果使用jQuery ui中的show Effects來呈現,所以必須先了解show Effects使用方式
關於demo範例:

Html部分:
    
1
  /  

id名稱開頭為pic的div 依序為須要呈現輪播效果的圖檔,id名稱規則為id1~idN。
id名稱為num的div 幾之幾(目前第幾張 / 總張數)區塊。
id名稱為no的div 目前第幾張區塊。
id名稱為total的div 總張數區塊。

CSS部分:
#content{
 margin:0 25%;
}
#wall{
 width : 573px;
 height : 430px; 
}
#list{
 width : 573px;
 height : 430px;
 position:absolute;
}
#list div {
 float:left;
 position:absolute;
 display:none; 
 
}
#list #pic1 {
 display:block; 
}
#num {
 position:absolute;
 font-size : 20px;
 color : white;
 background-color:gray;
 text-align:center;
 z-index:100; 
}
#no {
 float:left;
}
#cen {
 float:left;
}
#total {
 float:left;
}

JS部分:
載入必要檔案:





本次範例詳細JS部分:
    //彈性調整項目
    var chgSecond = 3000;  //幾秒換圖 (單位:毫秒)
    var slideSpeed = 1000; //圖片滑行速度 (單位:毫秒)
 
    //全域變數宣告  
    var i = 1;  
    var isFirstStart = true; //是否載入時第一次執行
 
$(document).ready(function(){
    //設定顯示總數  
    var totalNum = $("div[id^=pic]").length; //取得大圖總數 
    $("#total").html(totalNum); 
    //設定3秒換圖
    setInterval(slidePhoto,chgSecond); 
});

 
function slidePhoto()
{
    var totalNum = $("div[id^=pic]").length; //取得大圖總數 
    var beforeNum = (i-1);                   //前一張編號
 
    if ( isFirstStart==true && i==1 )
    {
        isFirstStart=false; //載入時第一次執行,第一張不滑行
        i++;
    }else
    {
        if ( i>totalNum ){ i=1; }           //若編號>總數則重頭第一張開始  
        //將所有圖檔隱藏並設定層級最低
        $("div[id^=pic]").css("display","none").css("z-index","1");
        //設定前一張保持顯示(避免現在這張滑行時背景為空的)
        if ( beforeNum>0 )
        {//前一張保持顯示
            $("#pic" + beforeNum ).css("display","block");
        }else
        {//現在是第一張,最後一張保持顯示
            $("#pic" + totalNum ).css("display","block");
        }
        //將目前要滑行的這張圖檔打開並設定層級最高
        $("#pic" + i ).css("display","block").css("z-index","100");
        //開始滑行
        $("#pic" + i ).show('slide', {direction: 'left'}, slideSpeed ,function(){
            $("#no").html(i); //設定、顯示目前是第幾張
            i++;
        });
    }  
}

如果您喜歡我的分享、或是我的文章對您有幫助的話,希望能到我的粉絲專頁點個讚追蹤我唷~~

寫程式、技術分享文章很辛苦,寫一篇要花非常久的時間,希望您能幫我點一下頁面上的廣告給我支持跟肯定,讓我更有動力寫這類文章唷~

4 則留言:

  1. 请问哪里可以看到demo吗?

    回覆刪除
  2. good ,現在一堆工程師,只知道使用套件。

    前陣子公司也遇到一個同事,沒套件活不下去!

    回覆刪除
    回覆
    1. 應該也還好啦 畢竟要求快速 套件比較快阿 ㄏ
      不過多少還是了解一下 有問題比較有方向解決倒是真的~~

      刪除

writing for work~writing for life~