来源：http://coffeescripter.com/code/ad-gallery/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css"> <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.js?rand=995"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead
of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o
<strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for?
Man...');
$('img.image1').data('ad-title', 'Title through $.data');
var galleries = $('.ad-gallery').adGallery({
start_at_index: 1,
callbacks: {
afterImageVisible: function() {
//上传完成后执行，下面例子为弹出当前图片的ID
alert($('img.imgWH:eq(' + this.current_index + ')').attr("id"));
}//备注：这里不要加“,”，否则在IE6下会出错
}
});
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>
<title>A demo of AD Gallery</title>
</head>
<body text-aligh:center;>
<div id="gallery" class="ad-gallery">
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/1.jpg" >
<img src="images/t/1.jpg" id="p1" class="imgWH">
</a>
</li>
<li>
<a href="images/t/2.jpg" >
<img src="images/t/2.jpg" id="p2" class="imgWH">
</a>
</li>
<li>
<a href="images/3.jpg">
<img src="images/t/3.jpg" id="p3" class="image7 imgWH">
</a>
</li>
<li>
<a href="images/4.jpg">
<img src="images/t/4.jpg" id="p4" class="image8 imgWH">
</a>
</li>
</ul>
</div>
</div>
<div class="ad-image-wrapper"></div>
</div>
</body>
</html>
使用总结：
1、要控制页面加载后显示哪一张图片，可以设置start_at_index参数的值，如start_at_index: 0，显示第1张， start_at_index: 2，显示第3张。
2、在一个图片分页的页面imageList，要点击里面某个图片，跳转到播放页imageDetail的对应图片，两个页面的图片列表都一样排序，如都降序，然后给url加个参数，使它的值为从0开始的序号（设当前页page，每页记录数pageSize，则每条记录的序号为(page-1) * pageSize) + 循环中计数器），然后imageDetail页面获取这个参数并赋值给start_at_index。
下面用到的一个例子(项目采用Monorail框架):
前台：
imageList.vm
//其它代码...
<ul>
#foreach($image in $imageList)
#set($adId= $velocityCount - 1 + $pCount)
<li>
<a href="imageDetail.page?id=$!{image.activityId}&adId=$adId">
<img src="$!{image.midImageUrl}"/>
</a>
<br />
$!{image.imageName}
</li>
#end
</ul>
imageDetail.vm
//其它代码...
var galleries = jQuery('.ad-gallery').adGallery({
start_at_index: $!{adId},
后台：
public void ImageList(int id, int page)
{
//其它代码...
PropertyBag.Add("pCount", page <= 1 ? 0 : (page-1) * pageSize);
}
public void ImageDetail(int id, int adId)
{
//其它代码...
PropertyBag.Add("adId", adId);
}