jQuery全屏相册代码

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

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

以下是 jQuery全屏相册代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" contect="zh-CN">
<title>jQuery全屏相册代码下载</title>
<link rel="stylesheet" type="text/css" href="css/album.css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.album.js"></script> 
<script type="text/javascript">
var _current_num=0;//设置从第几张图片开始
</script>
<!--[if IE]>
<style type="text/css">
.valin{ display:block;}
.valin i {display:inline-block;height:100%;vertical-align:middle}
.valin img{vertical-align:middle}
</style>
<![endif]-->
</head>
<body>
<div class="album-box" id="album">
  <div h class="pre-btn" id="preBtn" title="上一张 "><i></i></div>
  <div class="next-btn" id="nextBtn" title="下一张 "><i></i></div>
  <div class="album-con">
    <div class="valin"> <i></i><img src="images/20140121161108.JPG" alt="" id="realImg" />
      <p class="pic-alt" id="txtDes"></p>
    </div>
    <div id="imgLoading"></div>
  </div>
  <div h class="thum-box" id="thumBox">
    <div class="thum-wrap" id="thumWrap">
      <ul class="imglist fix" id="photoList">
      </ul>
    </div>
    <i class="thum-pre-btn" id="thumPreBtn" title="上一页"></i> <i class="thum-next-btn" id="thumNextBtn" title="下一页"></i> </div>
</div>
<textarea class="dn" id="albumDataList"> 
<li>
<div> <img alt="JS相册特效" src="images/tiny/20140121161108.JPG" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121161108.JPG</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img src="images/tiny/20140121161130.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121161130.jpg</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img src="images/tiny/20140121161152.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121161152.jpg</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img src="images/tiny/20140121161231.JPG" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121161231.JPG</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img alt="JS相册特效" src="images/tiny/20140126134637.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140126134637.jpg</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img alt="JS相册特效" src="images/tiny/20140121181958.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121181958.jpg</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img alt="JS相册特效" src="images/tiny/20140121182023.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121182023.jpg</i>
<i class="dn imgAlt"></i>
</li>
<li>
<div> <img alt="JS相册特效" src="images/tiny/20140121182118.jpg" onload="scaleImage(this,99,75)" alt=""></div>
<p></p>
<i class="dn">images/20140121182118.jpg</i>
<i class="dn imgAlt"></i>
</li>
</textarea>
<script type="text/javascript">
$(window).load(function(){
    var str_h=0;
   $("#album").find("div[h]").each(function(i,ele){
      str_h+=$(ele).height();
   });
    $("#album").height(str_h);
});
function scaleImage(o, w, h) {
    var img = new Image();
    img.src = o.src;
    if (img.width > 0 && img.height > 0) {
        if (img.width / img.height >= w / h) {
            if (img.width > w) {
                o.width = w;
                o.height = (img.height * w) / img.width;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
        } else {
            if (img.height > h) {
                o.height = h;
                o.width = (img.width * h) / img.height;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
        }
    }
}
</script>
</body>
</html>

JS代码(jquery.album.js):

/*name:jquery相册插件（防qq空间相册系统）添加自己播放功能添加viewMode 0没有缩略图 1有缩略图 2缩略图。全屏幕。可以对图片进行左右转args{
	preBtn:Dom 大图的左右按钮nextBtn:Dom 大图的左右按钮miniPreBtn:Dom 小图的左右按钮miniNextBtn:Dom 小图的左右按钮imgListWrap:DOM 包裹小图片列表的元素slideObj:DOM 动画的uldataNode:DOM 一般是数据内容，内容放在textarea里实现延迟加载。添加键盘事件的支持//设置动画参数pageNum:Number 设置一屏放几个小的缩略图}
*/
(function($){
	function Album(args,m){
	$.extend(this,defaultArgs,args);
	var _this = this;
	if(m){
	this.loadNextPic(m);
}
else{
	this.loadNextPic(0);
}
this.realImg.show();
	this.imgLoading.hide();
	this.realImg.load(function(){
	_this.imgLoading.hide();
	_this.realImg.show();
}
);
	if(this.albumDataList.val() == '') return;
	this.photoList.html(this.albumDataList.val());
	if(m){
	this.photoList.find("li:eq("+m.toString()+")").addClass('on');
}
else{
	this.photoList.find("li").first().addClass('on');
}
this.imgListLen = this.photoList.find('li').length;
	this.liW = this.photoList.find('li').outerWidth(true);
	if(this.imgListLen<this.picNum){
	this.picNum = this.imgListLen;
}
this.thumWrap.width(this.liW*this.picNum);
	if(m){
	this.index=m;
}
else{
	this.index=0;
}
this.page = 1;
	this.nPageCount=Math.ceil(this.imgListLen*this.liW /(this.liW *this.picNum));
	//大图左右点击this.nextBtn.click(function(){
	_this.nextItem();
}
);
	this.preBtn.click(function(){
	_this.preItem();
}
);
	//show hidethis.preBtn.hover(function(){
	$(this).find('i').css('visibility','visible')}
,function(){
	$(this).find('i').css('visibility','hidden')}
);
	this.nextBtn.hover(function(){
	$(this).find('i').css('visibility','visible')}
,function(){
	$(this).find('i').css('visibility','hidden')}
);
	//小图左右点击this.thumNextBtn.click(function(){
	_this.doNextMove();
}
);
	this.thumPreBtn.click(function(){
	_this.doPreMove();
}
);
	//点击每个小图this.photoList.find('li').each(function(i,o){
	$(this).click(function(){
	_this.loadNextPic(i);
	_this.showPic(i);
	_this.index=i;
	_this.photoList.find('li').eq(i).addClass('on').siblings().removeClass('on');
}
);
}
);
	this.init();
	var fullHeight = $(window).height();
	var crumH = $('.crumbs').outerHeight(true);
	var bottH = $('#thumBox').outerHeight(true);
	$('.valin').height(fullHeight-crumH - bottH);
	this.nextBtn.height(fullHeight-crumH - bottH);
	this.preBtn.height(fullHeight-crumH - bottH);
	this.nextBtn.find('i').css('top',((fullHeight-crumH - bottH)-84)/2);
	this.preBtn.find('i').css('top',((fullHeight-crumH - bottH)-84)/2);
	if(fullHeight < 620){
	this.thumBox.css({
	'bottom':'auto'}
);
}
else{
	this.thumBox.css({
	'bottom':'0'}
);
}
$(window).resize(function(){
	var fullHeight2 = $(window).height();
	arvar crumH = $('.crumbs').outerHeight(true);
	var bottH = $('#thumBox').outerHeight(true);
	$('.valin').height(fullHeight2-crumH - bottH);
	_this.nextBtn.height(fullHeight2-crumH - bottH);
	_this.preBtn.height(fullHeight2-crumH - bottH);
	_this.nextBtn.find('i').css('top',((fullHeight2-crumH - bottH)-84)/2);
	_this.preBtn.find('i').css('top',((fullHeight2-crumH - bottH)-84)/2);
	if(fullHeight < 500 || fullHeight2<fullHeight){
	_this.thumBox.css({
	'bottom':'auto'}
);
}
else if(fullHeight2>fullHeight){
	_this.thumBox.css({
	'bottom':'0'}
);
}
else if(fullHeight2==fullHeight){
	_this.thumBox.css({
	'bottom':'0'}
);
}
}
);
}
Album.prototype={
	init:function(){
	var path=window.location.pathname.replace("/","").split("-");
	var _num=_current_num;
	this.loadNextPic(_num);
}
,loadNextPic:function(n){
	if(0<=n<=this.imgListLen-1){
	//解决左右按钮失效this.nextBtn.css('visibility','visible');
	this.preBtn.css('visibility','visible');
}
this.realImg.hide();
	this.imgLoading.show();
	var nextPicUrl = this.photoList.find('li').eq(n).find('i').html();
	var imgAlt = this.photoList.find('li').eq(n).find('.imgAlt').html();
	if(!img){
	var img = new Image();
	var _this = this;
	var w = 800,h=500;
	var o = this.realImg.get(0);
	img.onload=function(){
	img.onload = null;
	if (img.width > 0 && img.height > 0){
	if (img.width / img.height >= w / h){
	if (img.width > w){
	o.width = w;
	o.height = (img.height * w) / img.width;
}
else{
	o.width = img.width;
	o.height = img.height;
}
o.alt = imgAlt;
}
else{
	if (img.height > h){
	o.height = h;
	o.width = (img.width * h) / img.height;
}
else{
	o.width = img.width;
	o.height = img.height;
}
o.alt = imgAlt;
}
}
}
img.src = nextPicUrl;
}
this.realImg.attr('src',img.src);
	this.realImg.load(function(){
	_this.imgLoading.hide();
	_this.realImg.show();
}
);
	this.showPic(n);
}
,showPic:function(n){
	var oLi = this.photoList.find('li');
	this.txtDes.html('');
	this.txtDes.html(oLi.eq(n).find('p').html());
}
,nextItem:function(){
	if(this.index == this.imgListLen-1){
	//针对chrome 点到最后一页的bugthis.index = this.imgListLen -1;
	this.nextBtn.css('visibility','hidden');
	this.preBtn.css('visibility','visible');
	return;
}
var nextItemIndex = this.index + 1;
	this.preBtn.css('visibility','visible');
	if(nextItemIndex > this.imgListLen){
	nextItemIndex = this.imgListLen -1;
	this.index = this.imgListLen -1;
	this.nextBtn.css('visibility','hidden');
}
this.loadNextPic(nextItemIndex);
	this.index=nextItemIndex;
	this.photoList.find('li').eq(nextItemIndex).addClass('on').siblings().removeClass('on');
	if(nextItemIndex+1 > this.page*this.picNum){
	//如果到了第一版面底部，则小缩略图自动加载下一屏this.thumNextBtn.trigger("click");
}
}
,preItem:function(){
	if(this.index <= 0){
	this.index = 0;
	this.nextBtn.css('visibility','visible');
	this.preBtn.css('visibility','hidden');
	return;
}
var preItemIndex = this.index - 1;
	this.nextBtn.css('visibility','visible');
	if(preItemIndex <= 0){
	preItemIndex = 0;
	this.index = 0;
	this.preBtn.css('visibility','hidden');
}
this.index=preItemIndex;
	//this.showPic(preItemIndex);
	this.loadNextPic(preItemIndex);
	//addthis.photoList.find('li').eq(preItemIndex).addClass('on').siblings().removeClass('on');
	if(preItemIndex < (this.page-1)*this.picNum){
	//如果到了第一版面底部，则小缩略图自动加载下一屏this.thumPreBtn.trigger("click");
}
}
,doNextMove:function(){
	var _this=this;
	if(!this.photoList.is(":animated")){
	this.thumNextBtn.attr('title','').css('opacity',"1");
	if(this.page >= this.nPageCount){
	this.thumNextBtn.attr('title','已到最后一页了').css('opacity',"0.5");
}
else{
	this.thumPreBtn.attr('title','').css('opacity',"1");
	this.photoList.animate({
	left:'-='+this.picNum*this.liW+'px'}
,1000);
	this.page++;
}
}
}
,doPreMove:function(){
	if(!this.photoList.is(":animated")){
	this.thumNextBtn.attr('title','').css('opacity',"1");
	if(this.page <= 1){
	this.thumPreBtn.attr('title','已到第一页了').css('opacity',"0.5");
}
else{
	this.thumNextBtn.attr('title','').css('opacity',"1");
	this.photoList.animate({
	left:'+='+this.picNum*this.liW+'px'}
,1000);
	this.page--;
}
}
}
}
;
	var defaultArgs ={
}
;
	$(function(){
	var path=window.location.pathname.replace("/","").split("-");
	var num=_current_num;
	new Album({
	viewMode:0,preBtn:$('#preBtn'),nextBtn:$('#nextBtn'),thumPreBtn:$('#thumPreBtn'),thumNextBtn:$('#thumNextBtn'),realImg:$('#realImg'),txtDes:$('#txtDes'),thumWrap:$('#thumWrap'),photoList:$('#photoList'),thumPreBtn:$('#thumPreBtn'),thumNextBtn:$('#thumNextBtn'),albumDataList:$('#albumDataList'),picNum:8,//设置thum上一屏放几个小缩略图imgLoading:$('#imgLoading'),thumBox:$('#thumBox')}
,num);
}
);
}
)(jQuery);

CSS代码(album.css):

html,body,h1,h2,h3,h4,p,form,dl,dd,ul,li,ol{margin:0;padding:0;}
ul,ol{list-style:none;}
img,fieldset{border:0}
.fix{*zoom:1;}
.fix:after,.fix:before{display:block;content:".";height:0;clear:both;overflow:hidden;visibility:hidden;}
body{background:#141414;font-size:12px;font-family:'����',Arial,Helvetica,sans-serif;}
a{text-decoration:none;}
.crumbs{padding:10px 0 10px 20px;overflow:hidden;*zoom:1;color:#9B9B9B;}
.crumbs a{color:#9B9B9B;}
.album-box{width:100%;margin:0 auto;text-align:center;color:white;}
.imglist{width:2000em;position:absolute;white-space:nowrap;left:0;top:0;}
.imglist li{float:left;width:80px;height:50px;margin-right:20px;display:inline;}
.imglist li div{width:80px;height:50px;overflow:hidden;opacity:0.6;filter:alpha(opacity=60);cursor:pointer;}
.imglist li.on div{width:80px;height:50px;border:2px solid #fff;opacity:1;filter:alpha(opacity=100);}
.album-con{position:relative;z-index:2;width:980px;margin:0 auto;}
.thum-wrap{margin:0 auto;overflow:hidden;height:55px;position:relative;z-index:888;}
.thum-pre-btn,.thum-next-btn{position:absolute;width:14px;height:25px;background:url(../images/nav_thumbs2.png) no-repeat 0 0;top:50%;margin-top:-12.5px;cursor:pointer;z-index:999;}
.thum-pre-btn{left:20px;}
.thum-next-btn{right:20px;background-position:-14px 0;}
.thum-box{padding:5px 0px;background:#000;bottom:0;height:55px;left:0;min-width:780px;overflow:hidden;position:absolute;width:100%;}
.pic-alt{padding:0;position:absolute;left:10px;bottom:20px;width:960px;text-align:center;font-size:12px;}
.album-top-bar{position:relative;z-index:11;}
.pre-btn,.next-btn{position:absolute;z-index:111;width:50%;height:100%;cursor:pointer;text-align:left;background:url(../images/pixel.gif);}
.pre-btn{left:0}
.next-btn{right:0}
.pre-btn i,.next-btn i{display:block;visibility:hidden;background:url(../images/arrows.png) no-repeat 0 -84px;position:absolute;top:50%;height:84px;overflow:hidden;width:84px;}
.pre-btn i{left:20px;}
.next-btn i{right:20px;background-position:0 0;}
#imgLoading{background:url(../images/loading.gif) no-repeat scroll 0 0 transparent;height:37px;left:50%;margin:-19px 0 0 -19px;position:absolute;top:50%;width:37px;}
.valin{width:980px;height:600px;display:table-cell;vertical-align:middle;position:relative;}
.arcrum{margin:0 6px;color:#9B9B9B;}
.valin img{padding:10px;background:#fff;}
.dn{display:none;}

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