jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊
更新時(shí)間：2015年03月14日 11:46:37 投稿：hebedich
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊的方法和示例，基于jQuery插件jQuery.album.js來實(shí)現(xiàn)的，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。
大圖全屏圖片相冊jQuery插件，支持左右按鈕切換以及點(diǎn)擊大圖自動切換圖片，基于jQuery插件jQuery.album.js，插件支持參數(shù)自定義功能，viewMode：0沒有縮略圖 1有縮略圖 2縮略圖。全屏幕?？梢詫D片進(jìn)行左右轉(zhuǎn)，具體的參數(shù)大家可以查看jQuery.album.js文件，總之效果很不錯(cuò)，喜歡的朋友可學(xué)習(xí)下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" contect="zh-CN">
<title>非常不錯(cuò)的JS相冊特效代碼下載 </title>
<meta name="keywords" content="JS代碼,JS特效,JS特效代碼,JS相冊特效,JS相冊代碼,jQuery相冊特效,jQuery相冊插件,jQuery相冊圖片輪播" />
<meta name="description" content="JS代碼網(wǎng)提供高質(zhì)量的JS相冊特效代碼,jQuery相冊特效下載" />
<link rel="stylesheet" type="text/css" href="css/base.css?v=1409654123" />
<link rel="stylesheet" type="text/css" href="css/album.css?v=1409654123" media="all" />
<script type="text/javascript" src="js/jquery.js?v=1409654123"></script>
<script type="text/javascript">
var dxlCityId = 7;
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)"></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)"></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)"></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)"></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)"></div>
<p></p>
<i class="dn">images/20140121182118.jpg</i>
<i class="dn imgAlt"></i>
</li>
</textarea>
<div id="schedule-pop2" class="schedule-pop" style="display: none; top: 102px; left: 0px;">
<div id="inpForm2" class="formList formSmall">
<p class="hd clearfix">
<strong>花嫁麗舍私人婚禮會所（世博店）</strong><i>檔期查詢</i><br>
</p>
<p class="bd">
即將為你查詢：<span><em id="year">2014</em>年<em id="mouth">01</em>月<em id="day">24</em>日</span>的婚宴檔期情況<br>
請輸入手機(jī)號碼，便于接受酒店實(shí)時(shí)檔期信息！
</p>
<div class="inputBox">
<div class="mbInp">
<label>請輸入手機(jī)號</label><input type="text" id="mobile614" class="txt" value="" name="mobile" maxlength="11"><span style="padding-left: 0px;" class="msg"><em></em></span>
</div>
</div>
<div class="inputBox clearfix"><input type="submit" id="btn614" class="btn mobile_submit fl mr10" value=""><i class="fl">您的重要信息不會被泄露 詳見隱私條約</i></div>
<div id="close614_2"></div>
<input type="hidden" name="act" value="do">
<input type="hidden" name="from" value="detail">
<input type="hidden" name="noalert" value="a">
<input type="hidden" name="schedule_hotel" value="schedule_hotel">
<input type="hidden" name="happyday" value="" id="happydayv1">
<input type="hidden" name="usertype" value="return" id="usertype">
<input type="hidden" name="order_from" value="sh_HotelDetail_Schedule_TopCenter">
</div>
<input type="hidden" id="trackCitys" value="sh">
<input type="hidden" id="hotel_id" value="5499" />
<input type="hidden" id="hotel_name" value="花嫁麗舍私人婚禮會所（世博店）" />
</div>
<script type="text/javascript">
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;
}
// 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>
<script type="text/javascript" src="js/jquery.album.js?v=1409654123"></script>
</body>
</html>
以上就是本文分享給大家的實(shí)例代碼了，希望對大家學(xué)習(xí)jQuery能夠有所幫助。
您可能感興趣的文章:
- jquery+html仿翻頁相冊功能
- jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果
- 非常漂亮的相冊集 使用jquery制作相冊集
- Jquery全屏相冊插件zoomvisualizer具有調(diào)節(jié)放大與縮小功能
- jQuery實(shí)現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實(shí)例
- jquery實(shí)現(xiàn)相冊一下滑動兩次的方法
- 基于spring+hibernate+JQuery開發(fā)之電子相冊(附源碼下載)
- jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實(shí)現(xiàn)代碼
- 收集的10個(gè)免費(fèi)的jQuery相冊
- Html5+jQuery+CSS制作相冊小記錄
相關(guān)文章
基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果
有了jquery一切變的如此簡單！讓js做的動畫更有動感。2010-04-04
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷，但是當(dāng)不符合條件時(shí)，怎么跳出當(dāng)前循環(huán)，解決方法如下,需要的朋友可以參考下2014-06-06
基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery tree 可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)
jquery tree 可編輯節(jié)點(diǎn)，實(shí)現(xiàn)的三級菜單實(shí)現(xiàn)代碼，這里我們將為大家準(zhǔn)備了兩個(gè)。一個(gè)是鋒利的jquery中的一句話導(dǎo)航菜單實(shí)現(xiàn)代碼。非常不錯(cuò)。2009-11-11
jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表的方法,涉及jquery鼠標(biāo)事件及節(jié)點(diǎn)的遍歷與屬性操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JQuery實(shí)現(xiàn)簡單的復(fù)選框樹形結(jié)構(gòu)圖示例【附源碼下載】
這篇文章主要介紹了JQuery實(shí)現(xiàn)簡單的復(fù)選框樹形結(jié)構(gòu)圖,涉及jQuery頁面元素屬性動態(tài)操作與事件響應(yīng)相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-07-07
選擇用戶是一個(gè)比較常用的功能，主要包含2個(gè)功能點(diǎn)（保存已選選項(xiàng)、顯示已選用戶）2014-07-07
Jquery+WebService 校驗(yàn)賬號是否已被注冊的代碼
在Javascirpt代碼中，調(diào)用Jquery的方法$.Ajax(function)實(shí)現(xiàn)Ajax,傳遞賬號信息給Web服務(wù)，Web服務(wù)再調(diào)用數(shù)據(jù)庫操作類查詢數(shù)據(jù)庫，并返回?cái)?shù)據(jù)給前臺頁面。2010-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12