jQuery门户网站带缩略图相册js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery门户网站带缩略图相册js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>jQuery门户网站带缩略图相册</title>
<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" />
</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" 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">
var Album = new jQuery.Album();
</script>
</body>
</html>

JS代码(carousel.js):

/** * @author Yaohaixiao */
jQuery.Carousel = function(config){
	this.setting ={
	root:null,related:null,relatedlist:null,relateditems:null,carousel:null,pages:{
	prevBlock:null,nextBlock:null,prev:null,next:null,current:null,total:null}
,timer:null,curPage:0,maxPages:0,speed:1000,item:'li',items:null,itemsPrePage:0,itemsPreStep:0,direction:'V',auto:false,isButtonsOut:false}
;
	$.extend(this.setting,config);
	this.init();
	return this;
}
;
	jQuery.Carousel.prototype ={
	init:function(){
	var Carousel = this,setting = Carousel.setting,direction = setting.direction.toUpperCase(),carousel = setting.carousel,carouselWidth = 0,pages = setting.pages,next = pages.next,prev = pages.prev,related = setting.related,relatedlist = setting.relatedlist,current = pages.current,total = pages.total,maxPages = 0;
	this.deleteItems();
	setting.items = $(carousel).find(setting.item);
	if (!setting.itemsPreStep){
	setting.itemsPrePage = $(carousel).parent().width() / $(setting.items[0]).width();
	maxPages = setting.maxPages = Math.ceil($(setting.items).length / setting.itemsPrePage);
}
else{
	if (setting.itemsPreStep > 0){
	if ($(setting.items).length < setting.itemsPrePage){
	maxPages = setting.maxPages = 1;
}
else{
	maxPages = setting.maxPages = 1 + Math.ceil(($(setting.items).length - setting.itemsPrePage)/setting.itemsPreStep);
}
}
}
if (maxPages < 2){
	$(next).addClass('hide');
	$(prev).addClass('hide');
}
if(direction==='H'){
	$(carousel).css('width',($(setting.items[0]).width() * setting.items.length) + 'px');
}
if(related && relatedlist){
	setting.relateditems = $(relatedlist).find('li');
}
if (current){
	$(current).html(setting.curPage + 1);
}
if (total){
	$(total).html(maxPages);
}
this.bind();
	if(setting.auto){
	setting.timer = setTimeout(function(){
	Carousel.auto.call(Carousel);
}
,4000);
}
return this;
}
,bind:function(){
	var Carousel = this,setting = this.setting,root = $(setting.root),related = setting.related,relateditems = setting.relateditems,pages = setting.pages,prevBlock = pages.prevBlock,nextBlock = pages.nextBlock,btnNext = $(root.find(pages.next)[0]),btnPrev = $(root.find(pages.prev)[0]),clearTimer = function(evt){
	if (setting.timer){
	clearTimeout(setting.timer);
	setting.timer = null;
}
}
,setTimer = function(evt){
	setting.timer = setTimeout(function(){
	Carousel.auto.call(Carousel);
}
,4000);
}
;
	if (setting.auto){
	$(root).mouseover(clearTimer);
	$(root).mouseout(setTimer);
	if (setting.isButtonsOut){
	btnNext.mouseover(clearTimer);
	btnNext.mouseout(setTimer);
	btnPrev.mouseover(clearTimer);
	btnPrev.mouseout(setTimer);
}
}
if (prevBlock && nextBlock){
	root.mouseover(function(){
	$(btnPrev).removeClass('hide');
	$(btnNext).removeClass('hide');
}
);
	root.mouseout(function(){
	$(btnPrev).addClass('hide');
	$(btnNext).addClass('hide');
}
);
	$(prevBlock).click(function(evt){
	Carousel.prev.call(Carousel);
	evt.preventDefault();
	evt.stopPropagation();
}
);
	$(nextBlock).click(function(evt){
	Carousel.next.call(Carousel);
	evt.preventDefault();
	evt.stopPropagation();
}
);
}
$(btnPrev).click(function(evt){
	Carousel.prev.call(Carousel);
	evt.preventDefault();
	evt.stopPropagation();
}
);
	$(btnNext).click(function(evt){
	Carousel.next.call(Carousel);
	evt.preventDefault();
	evt.stopPropagation();
}
);
	if(related){
	$(relateditems).hover(function(evt){
	$(this).addClass('hover');
}
,function(evt){
	$(this).removeClass('hover');
}
);
	$('#lnk-back-beginning').click(function(evt){
	setting.curPage = 0;
	Carousel.current.call(Carousel,setting.curPage);
	$(related).addClass('hide');
	evt.preventDefault();
	evt.stopPropagation();
}
);
}
return this;
}
,next:function(){
	var setting = this.setting,pages = setting.pages,related = setting.related,current = pages.current,total = pages.total,maxPages = setting.maxPages;
	setting.curPage += 1;
	if (setting.curPage === maxPages){
	if (!related){
	setting.curPage = 0;
}
}
if (related){
	if (setting.curPage === maxPages){
	$(related).removeClass('hide');
}
else{
	this.current(setting.curPage);
}
}
else{
	this.current(setting.curPage);
}
return this;
}
,prev:function(){
	var setting = this.setting,pages = setting.pages,current = pages.current,total = pages.total,maxPages = setting.maxPages;
	setting.curPage -= 1;
	if (setting.curPage < 0){
	setting.curPage = maxPages - 1;
}
this.current(setting.curPage);
	return this;
}
,current:function(index){
	var carousel = this,setting = this.setting,pages = setting.pages,current = pages.current,total = pages.total,maxPages = setting.maxPages;
	if (current){
	$(current).html(setting.curPage + 1);
}
if (total){
	$(total).html(maxPages);
}
this.move(setting.curPage);
	return this;
}
,move:function(index){
	var setting = this.setting,direction = setting.direction,carousel = $(setting.carousel);
	if (direction.toUpperCase() === 'H'){
	property = 'left';
	scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).width()) * index:(setting.itemsPrePage ? (setting.itemsPrePage * $(setting.items[0]).width()) * index:$(setting.root).width() * index);
	carousel.animate({
	'left':'-' + scrollValue + 'px'}
,setting.speed);
}
else{
	if (direction.toUpperCase() === 'V'){
	scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).height()) * index:$(setting.root).height() * index;
	carousel.animate({
	'top':'-' + scrollValue + 'px'}
,setting.speed);
}
}
return this;
}
,deleteItems:function(){
	var listPhotos = $(this.setting.carousel).find('img');
	if (listPhotos.length === 0){
	return false;
}
listPhotos.each(function(i,img){
	if ($(img).attr('src').indexOf('.jpg') === -1){
	$(img).parent().remove();
}
}
);
	return this;
}
,auto:function(){
	var Carousel = this,setting = this.setting;
	if(setting.timer){
	clearTimeout(setting.timer);
	setting.timer = null;
}
if(setting.maxPages<2){
	return false;
}
setting.curPage += 1;
	if(setting.curPage===setting.maxPages){
	setting.curPage = 0;
}
this.current(setting.curPage);
	setting.timer = setTimeout(function(){
	Carousel.auto.call(Carousel);
}
,4000);
	return this;
}
}
;
	jQuery.carousels = function(){
	var carousels = [],i = 0,len = arguments.length;
	for (;
	i < len;
	i += 1){
	carousels[i] = new jQuery.Carousel(arguments[i]);
}
return carousels;
}
;

CSS代码(album.css):

.album{margin:20px auto;width:1000px;border:10px solid #FFF;-webkit-box-shadow:1px 2px 5px #CCC;-moz-box-shadow:1px 1px 5px #CCC;box-shadow:1px 1px 5px #CCC;overflow:hidden;}
.album-image-md{position:relative;z-index:1;margin:0 auto;height:800px;overflow:hidden;}
.album-image-bd{position:relative;z-index:1;margin:0 auto;height:750px;text-align:center;overflow:hidden;}
.album-image{position:absolute;z-index:2;top:50%;left:50%;}
.album-image-ft{margin:0 auto;height:50px;line-height:50px;text-align:center;overflow:hidden;}
#album-image-ft{font-size:12px;}
.album-image-nav{position:absolute;z-index:2;top:0;left:0;margin:0;padding:0;width:980px;height:750px;overflow:hidden;}
.album-image-nav-left-block{position:relative;z-index:1;float:left;margin:0;width:50%;height:750px;list-style-type:none;overflow:hidden;}
.album-image-nav-right-block{position:relative;z-index:1;float:left;margin:0;width:50%;height:750px;list-style-type:none;overflow:hidden;}
.album-image-btn-prev:link,.album-image-btn-prev:visited,.album-image-btn-prev:hover{position:absolute;z-index:2;top:50%;left:0;margin:-40px 0 0 0;width:40px;height:80px;line-height:60px;font-size:100px;color:#999;background-color:#333;opacity:0.7;filter:alpha(opacity=70);text-decoration:none;text-align:center;overflow:hidden;}
.album-image-btn-next:link,.album-image-btn-next:visited,.album-image-btn-next:hover{position:absolute;z-index:2;top:50%;right:0;margin:-40px 0 0 0;width:40px;height:80px;line-height:60px;font-size:100px;color:#999;background-color:#333;opacity:0.7;filter:alpha(opacity=70);text-decoration:none;text-align:center;overflow:hidden;}
.album-image-btn-prev:hover,.album-image-btn-next:hover{color:#FFF;background-color:#000;}
.album-image-loading-overlay{position:absolute;z-index:4;top:0;left:0;margin:0;width:980px;height:750px;background-color:#FFF;opacity:0.6;filter:alpha(opacity=60);overflow:hidden;}
.album-image-loading-overlay img{position:absolute;z-index:4;top:50%;left:50%;margin:-50px 0 0 -50px;width:100px;height:100px;}
.album-carousel{margin:0 auto;width:980px;height:80px;overflow:hidden;}
.album-carousel-btn-prev:link,.album-carousel-btn-prev:visited,.album-carousel-btn-prev:hover{float:left;margin:0;width:50px;height:80px;line-height:70px;text-align:center;font-size:80px;text-decoration:none;color:#999;overflow:hidden;}
.album-carousel-btn-next:link,.album-carousel-btn-next:visited,.album-carousel-btn-next:hover{float:right;margin:0;width:50px;height:80px;line-height:70px;text-align:center;font-size:80px;text-decoration:none;color:#999;overflow:hidden;}
.album-carousel-btn-prev:hover,.album-carousel-btn-next:hover{color:#F00;background-color:#F4F4F4;}
.album-carousel-zone{position:relative;z-index:1;float:left;margin:0;width:880px;height:80px;background-color:#FFF;overflow:hidden;}
.album-carousel-list{position:absolute;z-index:2;top:0;left:0;margin:0;padding:0;width:1760px;height:80px;overflow:hidden;}
.album-carousel-thumb{position:relative;z-index:3;float:left;margin:0;list-style-type:none;width:80px;height:80px;overflow:hidden;}
.album-carousel-thumb a:link,.album-carousel-thumb a:visited,.album-carousel-thumb a:hover{position:absolute;z-index:2;top:0;left:0;width:80px;height:80px;border:3px solid #FFF;overflow:hidden;}
.album-carousel-thumb-selected a:link,.album-carousel-thumb-selected a:visited,.album-carousel-thumb-selected a:hover,.album-carousel-thumb a:hover{border:3px solid #F00;}
.album-carousel-thumb img{position:absolute;z-index:1;display:block;top:-37px;left:-80px;width:230px;height:144px;opacity:0.5;filter:alpha(opacity=50);}
.album-carousel-thumb-selected a:link img,.album-carousel-thumb-selected a:visited img,.album-carousel-thumb-selected a:hover img,.album-carousel-thumb a:hover img{opacity:1;filter:alpha(opacity=100);}
.album-download:link,.album-download:visited,.album-download:hover{position:absolute;z-index:3;top:10px;right:10px;margin:0;height:28px;line-height:28px;font-size:12px;padding-left:30px;text-decoration:none;background:transparent url(../img/button-bg-comments.png) 0 -137px no-repeat;overflow:hidden;}
.album-download:hover{background-position:0 -282px;color:#FFF;}
.album-download span{display:block;background:transparent url(../img/button-bg-comments.png) 100% -50px;padding-right:20px;}
.album-download:hover span{background-position:100% -456px;}
.hide{display:none;}

CSS代码(base.css):

a:link,a:visited,a:hover{color:#111;text-decoration:none;}
a:hover{color:#C80000;text-decoration:underline;}
.wrap{position:relative;z-index:1;margin:0 auto;width:1000px;clear:both;overflow:hidden;}
.main,.side,.middle{float:left;margin-right:20px;display:inline;overflow:hidden;}
.side-right,.main-right{float:right;}
.float-l{float:left;}
.float-r{float:right;}
.clear{clear:both;}
.visible{overflow:visible;}
.inline{display:inline;}
.hide{display:none;}
.align-left{text-align:left;}
.align-center{text-align:center;}
.align-right{text-align:right;}
.noborder{border:none;}
.nomargin{margin:0;}
.nobg{background:none;}
.margin-t-10{margin-top:10px;}
.margin-r-10{margin-right:10px;}
.margin-b-10{margin-bottom:10px;}
.margin-l-10{margin-left:10px;}
.positioned{position:relative;z-index:2;}

附件:下载该文件资源,减少时间成本(增值服务)