jquery图片相册幻灯片特效代码下载


jquery图片相册幻灯片特效代码下载
jquery图片相册幻灯片特效代码下载以及图片相册幻灯片等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/pure-min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/blue.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/grids.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/album.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/base.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/pure-min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/blue.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/grids.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/album.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/base.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="js/album.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="js/album.js"></script>

3. HTML代码

<!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>
<!--sucai58.com 专注html3+css3素材的网站-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery门户网站带缩略图相册</title>
</head>
<body class="trs-tags">
<div class="header" id="header">
     <h1>jQuery 带缩略图相册效果</h1>
     <h2>一个不错的相册效果,推荐大家使用哦!</h2>	
</div><div class="content">
<div class="album" id="album">
	 <div class="album-image-md" id="album-image-md">
		  <p class="album-image-bd"><img src="img/01.jpg" class="album-image" id="album-image" alt="相册图片-示例图片(1)" width="674" height="750" /></p>	  
	 	  <p class="album-image-ft" id="album-image-ft">相册图片-示例图片(1)</p>
		  <a class="album-download" id="album-download" href="img/01.jpg" target="_blank"><span>下载图片</span></a>
		  <ul class="album-image-nav hide" id="album-image-nav">
		  	  <li class="album-image-nav-left-block" id="album-image-nav-left-block"><a href="#prev-image" class="album-image-btn-prev" id="album-image-btn-prev">‹</a></li>
			  <li class="album-image-nav-right-block" id="album-image-nav-right-block"><a href="#next-image" class="album-image-btn-next" id="album-image-btn-next">›</a></li>
		  </ul>
		  <p class="album-image-loading-overlay hide" id="album-image-loading-overlay"><img src="img/loading.gif" alt="loading..." width="100" height="100" /></p>
	 </div>
	 <div class="album-carousel" id="album-carousel">
	 	  <a href="#prev-group" class="album-carousel-btn-prev" id="album-carousel-btn-prev">‹</a>
		  <div class="album-carousel-zone" id="album-carousel-zone">
		  <ul class="album-carousel-list" id="album-carousel-list">
		  	  <li class="album-carousel-thumb album-carousel-thumb-selected"><a href="img/01.jpg"><img src="img/s-01.jpg" alt="相册图片-示例图片(1)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/02.jpg"><img src="img/s-02.jpg" alt="相册图片-示例图片(2)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/03.jpg"><img src="img/s-03.jpg" alt="相册图片-示例图片(3)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/04.jpg"><img src="img/s-04.jpg" alt="相册图片-示例图片(4)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/05.jpg"><img src="img/s-05.jpg" alt="相册图片-示例图片(5)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/06.jpg"><img src="img/s-06.jpg" alt="相册图片-示例图片(6)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/07.jpg"><img src="img/s-07.jpg" alt="相册图片-示例图片(7)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/08.jpg"><img src="img/s-08.jpg" alt="相册图片-示例图片(8)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/09.jpg"><img src="img/s-09.jpg" alt="相册图片-示例图片(9)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/10.jpg"><img src="img/s-10.jpg" alt="相册图片-示例图片(10)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/11.jpg"><img src="img/s-11.jpg" alt="相册图片-示例图片(11)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/12.jpg"><img src="img/s-12.jpg" alt="相册图片-示例图片(12)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/13.jpg"><img src="img/s-13.jpg" alt="相册图片-示例图片(13)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/14.jpg"><img src="img/s-14.jpg" alt="相册图片-示例图片(14)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/15.jpg"><img src="img/s-15.jpg" alt="相册图片-示例图片(15)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/16.jpg"><img src="img/s-16.jpg" alt="相册图片-示例图片(16)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/17.jpg"><img src="img/s-17.jpg" alt="相册图片-示例图片(17)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/18.jpg"><img src="img/s-18.jpg" alt="相册图片-示例图片(18)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/19.jpg"><img src="img/s-19.jpg" alt="相册图片-示例图片(19)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/20.jpg"><img src="img/s-20.jpg" alt="相册图片-示例图片(20)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/21.jpg"><img src="img/s-21.jpg" alt="相册图片-示例图片(21)" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/22.jpg"><img src="img/s-22.jpg" alt="相册图片-示例图片(22)" width="230" height="144" /></a></li>
		  </ul>
		  </div>
	 	  <a href="#next-group" class="album-carousel-btn-next" id="album-carousel-btn-next">›</a>
	 </div>
</div>
</div>
<script type="text/javascript">
var Album = new jQuery.Album();
</script>
</body>
</html>

相关推荐

发表评论

相关文章