来源: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%22%3E%3C/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>