编程 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 相关文章推荐

网站导致浏览器崩溃的原因总结(多款浏览器) 推荐

Apr 15 Javascript

javascript实现tabs选项卡切换效果(自写原生js)

Mar 19 Javascript

node.js中的console用法总结

Dec 15 Javascript

javascript运动详解

Jul 06 Javascript

jQuery与js实现颜色渐变的方法

Dec 30 Javascript

angular第三方包开发整理(小结)

Apr 19 Javascript

详解vue的diff算法原理

May 20 Javascript

vue项目中使用tinymce编辑器的步骤详解

Sep 11 Javascript

Vue响应式原理Observer、Dep、Watcher理解

Jun 06 Javascript

浅谈一种让小程序支持JSX语法的新思路

Jun 16 Javascript

微信小程序组件的外部样式externalClasses使用详解

Sep 06 Javascript

react实现复选框全选和反选组件效果

Aug 25 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