基于AD Gallery的jQuery相册插件

基于AD Gallery的jQuery相册插件，带左右翻页箭头和缩略图，能够无限增加图片，大图的右下角带有“start”和“stop”按钮，点击start，就会自动播放图片，并且在start的后面会显示倒计时，点击stop，倒计时小时，并且停止自动播放。界面有点粗糙，例如start和stop都是纯文字，您可以根据需要，修改样式。
1、在head引入相关的js文件和css文件，如下：

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="ad-gallery.css" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.js"></script>
<style type="text/css">
#gallery {padding:30px;background:#e1eef5;}
</style>
<script type="text/javascript">
$(function(){
    $('.ad-gallery').adGallery();  //ad-gallery即相册外层的div
});

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" alt="jQuery相册" title="jQuery相册" />
          </a>
        </li>
        <li><a href="images/a3.jpg">
            <img src="images/thumbs/s3.jpg" title="高塔耸立" alt="高塔耸立"/>
          </a>
        </li>
        <li><a href="images/a4.jpg">
            <img src="images/thumbs/s4.jpg" title="Title for 4.jpg"/>
          </a>
        </li>
        <li><a href="images/a5.jpg">
            <img src="images/thumbs/s5.jpg" title="朝鲜庆祝建党65周年烟火晚会" alt="朝鲜庆祝建党65周年烟火晚会"/>
          </a>
        </li>
        <li><a href="images/a6.jpg">
            <img src="images/thumbs/s6.jpg" title="我爱模板网" alt="我爱模板网"/>
          </a>
        </li>
        <li><a href="images/a7.jpg">
            <img src="images/thumbs/s7.jpg" title="网站模板" alt="网站模板"/>
          </a>
        </li>
        <li><a href="images/a8.jpg">
            <img src="images/thumbs/s8.jpg" title="AD Gallery相册画廊" alt="AD Gallery相册画廊"/>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

注意缩略图和大图要一一对应。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！