青青久精品视频在线观看_久久国产精品久久国产品这里_亚洲综合色自拍一区首页_亚洲色偷国产一区二区三区

0712-2888027 189-8648-0214
微信公眾號(hào)

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

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

AD Gallery一個(gè)高度可定制的jQuery畫廊插件

時(shí)間:2017-03-20來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 937次
AD Gallery一個(gè)高度可定制的jQuery畫廊插件
AD Gallery一個(gè)高度可定制的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庫(kù)可以直接到下載。

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> 

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

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

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

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

參數(shù) 描述 默認(rèn)值
start_at_index 第一張展示的大照片 0
width 照片的寬度,默認(rèn)為false,為false時(shí)直接讀取css的寬度 false
height 照片的高度,默認(rèn)為false,為false時(shí)直接讀取css的高度 false
thumb_opacity 設(shè)置縮略圖的透明值 0.7
description_wrapper 可以設(shè)置一個(gè)DIV用來(lái)展示照片的標(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時(shí),則到最后一張照片時(shí)就會(huì)停止切換 true
slideshow 用來(lái)設(shè)置開始和暫停功能
enable: true,//是否啟用開始和暫停功能
autostart: true,是否自動(dòng)播放
speed: 5000,切換時(shí)間
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 畫廊插件

您可能感興趣的相關(guān)文章:

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開