首页
所有分类
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代码
Mar 07 Javascript
javascript中的几个运算符
Jun 29 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
JavaScript上传文件时不用刷新页面方法总结（推荐）
Aug 15 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 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
group by(1) 表结构(1) 控制流(1) Hadoop(1) delete in(1) 查询效率(1) Express(1) Simhash(1) 字段分割(1) REGEXP(1)
You might like
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
js文件Cookie存取值示例代码
2014/02/20 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
原生js实现日期联动
2015/01/12 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
React组件refs的使用详解
2018/02/09 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
使用Python函数进行模块化的实现
2019/11/15 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python如何爬取网页中的文字
2020/07/28 Python
python读取xml文件方法解析
2020/08/04 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
Stuart Weitzman欧盟：美国奢华鞋履品牌
2017/05/24 全球购物
Nike台湾官方商店：Nike.com (TW)
2017/08/16 全球购物
奢华的意大利皮革手袋：Bene Handbags
2019/10/29 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
学习雷锋活动总结
2014/04/29 职场文书
优秀毕业生求职信
2014/06/05 职场文书
单位政审意见范文
2015/06/04 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python