首页
所有分类
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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JS实现长图上下滚动效果
Mar 19 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) canvas(2) flex-shrink(1) #{}(1) 图片模糊(1) 代理(2) flex(1) SQL注入(2) 匹配文本(1) GNN(1)
You might like
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
小心！AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
详解flask入门模板引擎
2018/07/18 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python time()的实例用法
2020/11/03 Python
美国庭院家具购物网站：AlphaMarts
2019/04/10 全球购物
材料化学应届生求职信
2013/10/09 职场文书
一年级班主任感言
2014/03/08 职场文书
史上最牛的辞职信
2015/02/28 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书