0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > AD Gallery一個高度可定制的jQuery畫廊插件

AD Gallery一個高度可定制的jQuery畫廊插件

時間:2017-03-20來源:風(fēng)信官網(wǎng) 點擊: 937次
AD Gallery一個高度可定制的jQuery畫廊插件
AD Gallery一個高度可定制的jQuery畫廊插件

1、準(zhǔn)備Javascript及插件和CSS樣式文件。

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.ad-gallery.js"></script> 
<link rel="stylesheet" type="text/css" href="ad-gallery.css" /> 

demo中包含了插件文件和樣式,jquery庫可以直接到下載。

2、XHTML。

 
<div id="gallery" class="ad-gallery"> 
  <div class="ad-image-wrapper"></div> 
  <div class="ad-controls"></div> 
  <div class="ad-nav"> 
    <div class="ad-thumbs"> 
      <ul class="ad-thumb-list"> 
        <li><a href="images/a1.jpg"> 
            <img src="images/thumbs/s1.jpg" title="衡山香客" alt="祝融峰上祝融殿" /> 
          </a> 
        </li> 
        <li> 
          <a href="images/a2.jpg"> 
            <img src="images/thumbs/s2.jpg" title="圖片標(biāo)題" alt="圖片描述" /> 
          </a> 
        </li> 
        ... 
      </ul> 
    </div> 
  </div> 
</div> 

說明:最外層的DIV.ad-gallery是整個相冊的包含層。DIV.ad-image-wrapper放置所有大圖片,DIV.ad-controls放置控制按鈕如開始和暫停,DIV.ad-nav用來放置縮略圖。我們給每一張縮略圖設(shè)置了title屬性用來展示圖片的標(biāo)題,alt屬性用來展示圖片的描述信息。

3、應(yīng)用Gallery插件。

 
$(function(){ 
   $('.ad-gallery').adGallery(); 
}); 

AD Gallery插件常用參數(shù)一覽表

參數(shù) 描述 默認(rèn)值
start_at_index 第一張展示的大照片 0
width 照片的寬度,默認(rèn)為false,為false時直接讀取css的寬度 false
height 照片的高度,默認(rèn)為false,為false時直接讀取css的高度 false
thumb_opacity 設(shè)置縮略圖的透明值 0.7
description_wrapper 可以設(shè)置一個DIV用來展示照片的標(biāo)題和描述信息。如description_wrapper: $('#descriptions') false
display_next_and_prev 是否顯示上一張下一張導(dǎo)航按鈕 true
display_back_and_forward 是否顯示縮略圖導(dǎo)航按鈕 true
effect 窗口標(biāo)題屬性 title
splitTitle 設(shè)置展示效果,'slide-hori', 'slide-vert', 'fade', 'resize', 'none' 'slide-hori'
enable_keyboard_move 是否使用鍵盤方向鍵切換導(dǎo)航 true
cycle 是否循環(huán)顯示照片,如果設(shè)置為false時,則到最后一張照片時就會停止切換 true
slideshow 用來設(shè)置開始和暫停功能
enable: true,//是否啟用開始和暫停功能
autostart: true,是否自動播放
speed: 5000,切換時間
start_label: 'Start',開始按鈕顯示的內(nèi)容,可以為圖片按鈕
stop_label: 'Stop',停止按鈕顯示的內(nèi)容,可以為圖片按鈕
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
 

熱門關(guān)鍵詞: AD Gallery 高度可定制 jQuery 畫廊插件
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開