jQuery插件之AD Gallery制作相册类特效
官网http://adgallery.codeplex.com/演示网址:http://coffeescripter.com/code/ad-gallery/#ad-image-0
qq的图片站，效果还好吧，以前网站找了个类似的，一款jQuery下的插件，说实话，我不喜欢去掌握js这方面的东西，看起来很头疼，但是他却又确实很好用，下面简单介绍下AD Gallery。
功能：可以选择不同的展示效果，如上下左右滑动、淡入淡出、缩放交替等效果。支持键盘方向键切换。图片左右导航。预加载图像，直到完全显示。支持自动播放【可以自定义时间】和暂停。可设置照片标题和描述信息。图片尺寸自适应。
下图显示实际效果
本站给的百度网盘下载地址：http://pan.baidu.com/share/link?shareid=458304&uk=940030093
如何使用？
1、准备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中包含了插件文件和样式。
2、静态页面设置代码。<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="图片标题" alt="图片描述" /> </a> </li> ... </ul> </div> </div> </div> 说明：最外层的DIV.ad-gallery是整个相册的包含层。DIV.ad-image-wrapper放置所有大图片，DIV.ad-controls放置控制按钮如开始和暂停，DIV.ad-nav用来放置缩略图。我们给每一张缩略图设置了title属性用来展示图片的标题，alt属性用来展示图片的描述信息。
3、应用Gallery插件。$(function(){ $('.ad-gallery').adGallery(); }); 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
}
您还可以通过修改CSS文件来定制相册的外观。
页:
[1]