<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+jQuery打造的多種過渡方式帶縮略圖的圖片幻燈切換效果丨芯晴網(wǎng)頁特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
body{font-size:12px;font-family:Tahoma,Geneva,sans-serif;padding:0px;margin:0px;}
#container{width:660px;margin:0px auto;text-align:center;}
#gallery{padding:30px;background:#e1eef5;}
#descriptions{position:relative;height:50px;background:#EEE;width:640px;padding:10px;overflow:hidden;}
#descriptions .ad-image-description{position:absolute;}
#descriptions .ad-image-description .ad-description-title{display:block;}
p,p a{font-size:12px;color#666;}
</style>
<link rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/jquery.min.js"></script>
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
</head>
<body>
預(yù)覽效果時(shí)左下角會(huì)提示錯(cuò)誤，而且看不到效果，刷新一下就可以看到效果了；當(dāng)然，在實(shí)際使用中，不會(huì)出現(xiàn)這樣的問題。<br>
<!--把下面代碼加到<body>與</body>之間-->
<div id="container">
<div style="margin:0 auto 5px auto;width:728px;clear:both;"></div>
<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 ><img src="/images/s1.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s2.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s3.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s4.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s5.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s6.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s7.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s8.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s9.jpg" class="image0" width="90px" height="60px"></a></li>
<li><a ><img src="/images/s10.jpg" class="image0" width="90px" height="60px"></a></li>
</ul>
</div>
</div>
</div>
<p>
不同幻燈過渡效果演示: <select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select>
<a href="#" id="toggle-slideshow">切換幻燈效果</a> | <a href="#" id="toggle-description">切換幻燈圖片標(biāo)題顯示效果</a>
</p>
</div>
</body>
</html>
<br>第一次運(yùn)行本代碼，請(qǐng)刷新一下本頁面先~~~<br>所需js文件：<a >jquery.ad-gallery.css</a>、<a >jquery.min.js</a>、<a >jquery.ad-gallery.js</a><hr><p align="center"><font color=black>本特效由 <a target="_blank">芯晴網(wǎng)頁特效</a>丨CsrCode.Cn 收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。</font></p>
聯(lián)系客服
