jQuery插件实现大图全屏图片相册
大图全屏图片相册jQuery插件，支持左右按钮切换以及点击大图自动切换图片，基于jQuery插件jQuery.album.js，插件支持参数自定义功能，viewMode：0没有缩略图 1有缩略图 2缩略图。全屏幕。可以对图片进行左右转，具体的参数大家可以查看jQuery.album.js文件，总之效果很不错，喜欢的朋友可学习下
<!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>非常不错的JS相册特效代码下载 </title>
<meta name="keywords" content="JS代码,JS特效,JS特效代码,JS相册特效,JS相册代码,jQuery相册特效,jQuery相册插件,jQuery相册图片轮播" />
<meta name="description" content="JS代码网提供高质量的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>
请输入手机号码，便于接受酒店实时档期信息！
</p>
<div class="inputBox">
<div class="mbInp">
<label>请输入手机号</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>
以上就是本文分享给大家的实例代码了，希望对大家学习jQuery能够有所帮助。
相关推荐
-
非常漂亮的相册集 使用jquery制作相册集
一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片.预览如下: 该页面的代码十分简单,我们以此为例逐步实现图像的翻滚: img-rollover.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
-
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
先给大家展示效果图: 点击查看效果图 源码下载 jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer. 文件引用: <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript" src
-
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')
-
收集的10个免费的jQuery相册
这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http
-
基于spring+hibernate+JQuery开发之电子相册(附源码下载)
项目结构: 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop database if exists db_ajax; create database db_
-
jQuery 网易相册鼠标移动显示隐藏效果实现代码
其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
jquery+html仿翻页相册功能
今天心情大好,再发一篇最进前端实现的相册模仿功能. 这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来, 写这个玩意前,我在网上找了一些案例,但是一看代码都比较傻眼,固不想去研究,所以自己写了..... 下面是实现这个功能的截图 如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一些问题.下面我会将我遇到的这些问题的解决方法分享出来. 首先说下:postion这个属性 以
-
jquery实现相册一下滑动两次的方法
本文实例讲述了jquery实现相册一下滑动两次的方法.分享给大家供大家参考.具体实现方法如下: var t1=null; //定义为全局变量 $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; if (t1 == null){ t1 = new Date().getTime(); }els
-
jquery+CSS3实现3D拖拽相册效果
很久之前练习过的一个实践,复习完渐变.圆角.3D变形.拖拽等等来看源码,估计还不会太凌乱(◎﹏◎)哈哈哈 效果图: HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head> <meta charset="UTF-8"> <title>3D拖拽相册
-
Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离 话不多说,先上效果图: 代码如下: <!DOCTYPE html> <html> <head> <title>The second html page</title> <style ty