首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery插件实现大图全屏图片相册

Posted in Javascript onMarch 14, 2015

大图全屏图片相册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插件实现大图全屏图片相册

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
骨架屏(1) 加载异常(1) ESXI(1) 横向滚动(1) 共享文件夹(1) caddy(1) localStorage(1) 表约束(2) NginxConfig(1) SVN(1)
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
2017/01/20 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
js实现双色球效果
2020/08/02 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
味多美官网：蛋糕订购，100%使用天然奶油
2017/11/10 全球购物
标签和贴纸印刷：Lightning Labels
2018/03/22 全球购物
Chain Reaction Cycles俄罗斯：世界上最大的在线自行车商店
2019/08/27 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
副总经理岗位职责
2014/03/16 职场文书
借款民事起诉状范文
2015/05/19 职场文书
开学典礼观后感
2015/06/15 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python