1、运行效果

2、ad-gallery使用特性

1. 可以选择不同的展示效果，如上下左右滑动、淡入淡出、缩放交替等效果。

2. 支持键盘方向键切换。

3. 图片左右导航。

4. 预加载图像，直到完全显示。

5. 支持自动播放和暂停。

6. 可设置照片标题和描述信息。

7. 图片尺寸自适应。

8. 多种回调函数。

3、使用方式

3.1、插件引入

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

3.2、html

<div id="main">
    <div class="demo">
        <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="/admin/img/a5.jpg">
                                <img src="/admin/img/a5.jpg" title="衡山香客" alt="祝融峰上祝融殿" /><!--title属性用来展示图片的标题，alt属 性用来展示图片的描述信息。-->
                            </a>
                        </li>
                        <li>
                            <a href="/admin/img/a2.jpg">
                                <img src="/admin/img/a2.jpg" alt="南天门" />
                            </a>
                        </li>
                        <li><a href="/admin/img/a3.jpg">
                                <img src="/admin/img/a3.jpg" title="高塔耸立" alt="不敢高声语，恐惊天上人"/>
                            </a>
                        </li>
                        <li><a href="/admin/img/a4.jpg">
                                <img src="/admin/img/a4.jpg" title="Title for 4.jpg"/>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

3.3、css

#gallery {padding:30px;background:#c1e2b3;}

3.4、js调用插件

<script type="text/javascript">
    $(function(){
        $('.ad-gallery').adGallery();
    });
</script>

4、AD Gallery插件常用参数表