您的位置：首页 > 编程技术 > js  >  jQuery插件实现大图全屏图片相册

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

 更新时间：2015年3月15日 19:19  点击：2267

大图全屏图片相册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能够有所帮助。

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19

  • jquery实现加载更多"转圈圈"效果(示例代码)

    这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-10

  • C#从数据库读取图片并保存的两种方法

    这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16

  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14

  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • 自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13

  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30

  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07

  • jQuery 2.0.3 源码分析之core（一）整体架构

    拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31

  • jquery中常用的SET和GET$(”#msg”).html循环介绍

    复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13

  • jquery获取div距离窗口和父级dv的距离示例

    jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 复制代码 代码如下: *{ mar...2013-10-13

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03

  • jQuery实现切换页面过渡动画效果

    直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31