jquery相册插件带缩略图左右按钮控制大图切换插件


jquery相册插件带缩略图左右按钮控制大图切换插件
jquery相册插件带缩略图左右按钮控制大图切换插件以及带缩略图、左右按钮控制、大图切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="DB_gallery.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.DB_gallery.js"></script>

3. HTML代码

<div id="DB_gallery">
	<div class="DB_imgSet">
		<div class="DB_imgWin"><img src="img/img1.jpg" alt=""/></div>
		<div class="DB_page"><span class="DB_current">0</span>-<span class="DB_total">0</span></div>
		<div class="DB_prevBtn"><img src="img/prev_off.png" alt="jquery相册"/></div>
		<div class="DB_nextBtn"><img src="img/next_off.png" alt="图片相册"/></div>
	</div>
	<div class="DB_thumSet">
		<ul class="DB_thumMove">
			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="图片相册"/></a></li>
			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt="jquery相册"/></a></li>
			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt="图片相册"/></a></li>
			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt="jquery相册"/></a></li>
			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="图片相册"/></a></li>
			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt="图片相册"/></a></li>
			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="jquery相册"/></a></li>
			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt=""/></a></li>
			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt=""/></a></li>
			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt=""/></a></li>
			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="网页特效"/></a></li>
			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt=""/></a></li>
		</ul>
		<div class="DB_thumLine"></div>
		<div class="DB_prevPageBtn"><img src="img/prev_page.png" alt="上一页"/></div>
		<div class="DB_nextPageBtn"><img src="img/next_page.png" alt="下一页"/></div>
	</div>
</div><!--DB_gallery end-->
<script type="text/javascript">
$('#DB_gallery').DB_gallery({
	thumWidth:110,            
	thumGap:8,                
	thumMoveStep:4,           
	moveSpeed:300,            
	fadeSpeed:500            
});
</script>

相关推荐

发表评论

相关文章