jQuery外掛之AD Gallery外掛
阿新 • • 發佈：2018-12-17
通過外掛實現小圖和大圖聯動的畫廊
<!doctype html> <html> <head> <meta charset="utf-8"> <title>通過外掛實現小圖和大圖聯動的畫廊c通過外掛實現小圖和大圖聯動的畫廊</title> <link type="text/css" rel="stylesheet" href="../../../jQuery外掛/jQuery AD Gallery 畫廊（畫冊）外掛/jquery.ad-gallery.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="../../../jQuery外掛/jQuery AD Gallery 畫廊（畫冊）外掛/jquery.ad-gallery.js"></script> <style type="text/css"> *{ font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif"; color: red; line-height: 140%; } body{ padding: 30px; font-size: 70%; width: 1250px; } .ad-thumb-list li a img{height: 40px;} </style> <script type="text/javascript"> $(function(){ //例項化adGallery var ad=$('.ad-gallery').adGallery(); }); </script> </head> <body> <div id="container" style="margin: 0px auto;width:600px;"> <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="../../../../百度背景面板/star_img/img9.jpg"> <img src="../../../../百度背景面板/star_img/img9.jpg" class="image0" title="美圖檔名稱：img9.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img12.jpg"> <img src="../../../../百度背景面板/star_img/img12.jpg" title="美圖檔名稱：img12.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img14.jpg"> <img src="../../../../百度背景面板/star_img/img14.jpg" title="美圖檔名稱：img14.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img22.jpg"> <img src="../../../../百度背景面板/star_img/img22.jpg" title="美圖檔名稱：img22.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img18.jpg"> <img src="../../../../百度背景面板/star_img/img18.jpg" title="美圖檔名稱：img18.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img15.jpg"> <img src="../../../../百度背景面板/star_img/img15.jpg" title="美圖檔名稱：img15.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img16.jpg"> <img src="../../../../百度背景面板/star_img/img16.jpg" title="美圖檔名稱：img16.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img12.jpg"> <img src="../../../../百度背景面板/star_img/img12.jpg" title="美圖檔名稱：img12.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img13.jpg"> <img src="../../../../百度背景面板/star_img/img13.jpg" title="美圖檔名稱：img13.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img20.jpg"> <img src="../../../../百度背景面板/star_img/img20.jpg" title="美圖檔名稱：img20.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img24.jpg"> <img src="../../../../百度背景面板/star_img/img24.jpg" title="美圖檔名稱：img24.jpg"> </a> </li> <li> <a href="../../../../百度背景面板/back_img/img6.jpg"> <img src="../../../../百度背景面板/back_img/img6.jpg" title="美圖檔名稱：img6.jpg"/> </a> </li> <li> <a href="../../../../百度背景面板/star_img/img4.jpg"> <img src="../../../../百度背景面板/star_img/img4.jpg" title="Angelababy（楊穎），1989年2月28日出生於上海市，華語影視女演員、時尚模特。2003年，Angelababy以模特身份出道，此後，她因擔任時尚模特而在香港嶄露頭角。2007年，她開始將工作重心轉向大銀幕。2011年，她在愛情片《夏日樂悠悠》中首次擔任女主角。2012年，憑藉言情片《第一次》獲得第13屆華語電影傳媒大獎最受矚目女演員獎。2013年，Angelababy與其她三位女藝人被《南都娛樂週刊》選為新“四小花旦”；同年，她還完成了個人的熒屏處女作《大漢情緣之雲中歌》..."/> </a> </li> </ul> </div> </div> </div> <p> 選擇切換效果：<select id="switch-effect"> <option value="slide-hori">水平滑動</option> <option value="slide-vert">垂直平滑</option> <option value="resize">收縮/伸長</option> <option value="fade">褪色效果</option> <option value="">無效果</option> </select> </p> </div> </body> </html>
jQuery外掛下載：
展示效果：
AD Gallery外掛常用引數一覽表
| 引數 | 描述 | 預設值 |
| start_at_index | 第一張展示的大照片 | 0 |
| width | 照片的寬度，預設為false,為false時直接讀取css的寬度 | false |
| height | 照片的高度，預設為false,為false時直接讀取css的高度 | false |
| thumb_opacity | 設定縮圖的透明值 | 0.7 |
| description_wrapper | 可以設定一個DIV用來展示照片的標題和描述資訊。如description_wrapper: $('#descriptions') | false |
| display_next_and_prev | 是否顯示上一張下一張導航按鈕 | true |
| display_back_and_forward | 是否顯示縮圖導航按鈕 | true |
| effect | 視窗標題屬性 | title |
| splitTitle | 設定展示效果，'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
| enable_keyboard_move | 是否使用鍵盤方向鍵切換導航 | true |
| cycle | 是否迴圈顯示照片，如果設定為false時，則到最後一張照片時就會停止切換 | true |
| slideshow |
用來設定開始和暫停功能 enable: true,//是否啟用開始和暫停功能 autostart: true,是否自動播放 speed: 5000,切換時間 start_label: 'Start',開始按鈕顯示的內容，可以為圖片按鈕 stop_label: 'Stop',停止按鈕顯示的內容，可以為圖片按鈕 onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops } |