jQuery插件实现大图全屏图片相册
大图全屏图片相册jQuery插件，支持左右按钮切换以及点击大图自动切换图片，基于jQuery插件jQuery.album.js，插件支持参数自定义功能，viewMode：0没有缩略图1有缩略图 2缩略图。全屏幕。可以对图片进行左右转，具体的参数大家可以查看jQuery.album.js文件，总之效果很不错，喜欢的朋友可学习下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"contect="zh-CN">
<title>非常不错的JS相册特效代码下载</title>
<metaname="keywords"content="JS代码,JS特效,JS特效代码,JS相册特效,JS相册代码,jQuery相册特效,jQuery相册插件,jQuery相册图片轮播"/>
<metaname="description"content="JS代码网提供高质量的JS相册特效代码,jQuery相册特效下载"/>
<linkrel="stylesheet"type="text/css"href="css/base.css?v=1409654123"/>
<linkrel="stylesheet"type="text/css"href="css/album.css?v=1409654123"media="all"/>
<scripttype="text/javascript"src="js/jquery.js?v=1409654123"></script>
<scripttype="text/javascript">
vardxlCityId=7;
var_current_num=0;
</script>
<!--[ifIE]>
<styletype="text/css">
.valin{display:block;}
.valini{
display:inline-block;
height:100%;
vertical-align:middle
}
.valinimg{
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<divclass="album-box"id="album">
<divhclass="pre-btn"id="preBtn"title="上一张"><i></i></div>
<divclass="next-btn"id="nextBtn"title="下一张"><i></i></div>
<divclass="album-con">
<divclass="valin"><i></i><imgsrc="images/20140121161108.JPG"alt=""id="realImg"/>
<pclass="pic-alt"id="txtDes"></p>
</div>
<divid="imgLoading"></div>
</div>
<divhclass="thum-box"id="thumBox">
<divclass="thum-wrap"id="thumWrap">
<ulclass="imglistfix"id="photoList">
</ul>
</div>
<iclass="thum-pre-btn"id="thumPreBtn"title="上一页"></i><iclass="thum-next-btn"id="thumNextBtn"title="下一页"></i></div>
</div>
<textareaclass="dn"id="albumDataList">
<li>
<div><imgalt="JS相册特效"src="images/tiny/20140121161108.JPG"onload="scaleImage(this,99,75)"></div>
<p></p>
<iclass="dn">images/20140121161108.JPG</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgsrc="images/tiny/20140121161130.jpg"onload="scaleImage(this,99,75)"alt=""></div>
<p></p>
<iclass="dn">images/20140121161130.jpg</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgsrc="images/tiny/20140121161152.jpg"onload="scaleImage(this,99,75)"alt=""></div>
<p></p>
<iclass="dn">images/20140121161152.jpg</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgsrc="images/tiny/20140121161231.JPG"onload="scaleImage(this,99,75)"alt=""></div>
<p></p>
<iclass="dn">images/20140121161231.JPG</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgalt="JS相册特效"src="images/tiny/20140126134637.jpg"onload="scaleImage(this,99,75)"></div>
<p></p>
<iclass="dn">images/20140126134637.jpg</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgalt="JS相册特效"src="images/tiny/20140121181958.jpg"onload="scaleImage(this,99,75)"></div>
<p></p>
<iclass="dn">images/20140121181958.jpg</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgalt="JS相册特效"src="images/tiny/20140121182023.jpg"onload="scaleImage(this,99,75)"></div>
<p></p>
<iclass="dn">images/20140121182023.jpg</i>
<iclass="dnimgAlt"></i>
</li>
<li>
<div><imgalt="JS相册特效"src="images/tiny/20140121182118.jpg"onload="scaleImage(this,99,75)"></div>
<p></p>
<iclass="dn">images/20140121182118.jpg</i>
<iclass="dnimgAlt"></i>
</li>
</textarea>
<divid="schedule-pop2"class="schedule-pop"style="display:none;top:102px;left:0px;">
<divid="inpForm2"class="formListformSmall">
<pclass="hdclearfix">
<strong>花嫁丽舍私人婚礼会所（世博店）</strong><i>档期查询</i><br>
</p>
<pclass="bd">
即将为你查询：<span><emid="year">2014</em>年<emid="mouth">01</em>月<emid="day">24</em>日</span>的婚宴档期情况<br>
请输入手机号码，便于接受酒店实时档期信息！
</p>
<divclass="inputBox">
<divclass="mbInp">
<label>请输入手机号</label><inputtype="text"id="mobile614"class="txt"value=""name="mobile"maxlength="11"><spanstyle="padding-left:0px;"class="msg"><em></em></span>
</div>
</div>
<divclass="inputBoxclearfix"><inputtype="submit"id="btn614"class="btnmobile_submitflmr10"value=""><iclass="fl">您的重要信息不会被泄露 详见隐私条约</i></div>
<divid="close614_2"></div>
<inputtype="hidden"name="act"value="do">
<inputtype="hidden"name="from"value="detail">
<inputtype="hidden"name="noalert"value="a">
<inputtype="hidden"name="schedule_hotel"value="schedule_hotel">
<inputtype="hidden"name="happyday"value=""id="happydayv1">
<inputtype="hidden"name="usertype"value="return"id="usertype">
<inputtype="hidden"name="order_from"value="sh_HotelDetail_Schedule_TopCenter">
</div>
<inputtype="hidden"id="trackCitys"value="sh">
<inputtype="hidden"id="hotel_id"value="5499"/>
<inputtype="hidden"id="hotel_name"value="花嫁丽舍私人婚礼会所（世博店）"/>
</div>
<scripttype="text/javascript">
functionscaleImage(o,w,h){
varimg=newImage();
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;
}
//o.alt=img.width+"x"+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;
}
//o.alt=img.width+"x"+img.height;
}
}
}
</script>
<scripttype="text/javascript"src="js/jquery.album.js?v=1409654123"></script>
</body>
</html>
以上就是本文分享给大家的实例代码了，希望对大家学习jQuery能够有所帮助。