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

前端技术 2023/09/06 JavaScript

大图全屏图片相册jQuery插件，支持左右按钮切换以及点击大图自动切换图片，基于jQuery插件jQuery.album.js，插件支持参数自定义功能，viewMode：0没有缩略图 1有缩略图  2缩略图。全屏幕。可以对图片进行左右转，具体的参数大家可以查看jQuery.album.js文件，总之效果很不错，喜欢的朋友可学习下

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能够有所帮助。

本文地址：https://www.stayed.cn/item/15936

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案