该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些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" />

<title>无标题文档</title>

<style>

*{margin:0;padding:0;}

li{list-style:none;}

.item{margin:20px;}

.item ul li{float:left;margin-right:20px;}

.item ul li img{width:100px;cursor:pointer;}

.lb_wrap{display:none;}

.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}

.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}

.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}

.lightbox p.next{left:auto;background-position:right top;right:0;}

</style>

<script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript" src="jquery.LightBox.js"></script>

</head>

<body>

<div class="item">

  <ul>

    <li><img src="01.jpg" /></li>

    <li><img src="02.jpg" /></li>

    <li><img src="03.jpg" /></li>

    <li><img src="04.jpg" /></li>

    <li><img src="05.jpg" /></li>

    <li><img src="06.jpg" /></li>

  </ul>

</div>

<script>

$(function(){

    $(".item").LightBox({

        controls : true          //上一张、下一张按钮是否显示，默认是显示true

        });

    })

</script>

</body>

</html>

插件jquery.LightBox.js代码：

/*

*LightBox 1.0

*Copyright (c) 2015 小坏 http://tnnyang.cnblogs.com

*dependence jquery-1.7.1.js

*/

;(function(a){

    a.fn.LightBox = function(options){

        var defaults = {

            controls : true          //上一张、下一张按钮是否显示，默认是显示true

            }

        var opts = a.extend(defaults, options);        

        var lb_wrap = '<div class="lb_wrap"><div class="lightbox_bg"></div><div class="lightbox"><img src="loading.gif" class="lg_img"></div></div>';

        a("body").append(lb_wrap);

        //controls

        if(opts.controls){

            a(".lightbox").append('<p class="prev"></p><p class="next"></p>');

            }

        function imgobj(obj1, obj2){

            //imgObj.height是通过img对象获取的图片的实际高度

            var imgObj = new Image();

            imgObj.src = obj1.attr("src");

            var margintop = 0 - (imgObj.height)/2;

            obj2.css("margin-top",margintop);

            }        

        this.each(function(){

            var obj = a(this);

            var numpic = obj.find("li").length;

            var num = 0;

            //点击赋值并显示

            obj.find("img").click(function(){

                var src = a(this).attr("src");

                a(".lg_img").attr("src",src);

                imgobj(a(".lg_img"), a(".lightbox"));                

                a(".lb_wrap").fadeIn();

                a(".lg_img").fadeIn();

                a(".prev").fadeIn().siblings(".next").fadeIn();

                num = a(this).parent().index();   //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务

                });

            //上一张

            a(".prev").click(function(){

                if(num == 0){

                      num = numpic;

                  }

                var src = obj.find("li").eq(num-1).find("img").attr("src");

                a(".lg_img").attr("src",src);

                imgobj(a(".lg_img"), a(".lightbox"));

                num--;

                });

            //下一张

            a(".next").click(function(){

                if(num == numpic-1){

                      num = -1;

                }

                var src = obj.find("li").eq(num+1).find("img").attr("src");

                a(".lg_img").attr("src",src);

                imgobj(a(".lg_img"), a(".lightbox"));

                num++;

                });

            //点击除了上一张、下一张之外的其他地方隐藏

            a(".lb_wrap").click(function(e){

                  var e = e || window.event;

                  var elem = e.target || e.srcElement;

                  while(elem){

                      if (elem.className && elem.className.indexOf('prev')>-1) {

                          return;

                      }

                      if(elem.className && elem.className.indexOf('next')>-1){

                          return;

                          }

                      elem = elem.parentNode;

                  }

                  a(this).find("img").attr("src","loading.gif").hide();      //隐藏后，再将默认的图片赋给lightbox中图片的src

                  a(this).find(".prev").hide().siblings(".next").hide();

                  a(this).fadeOut();

                });

            })

        }

    })(jQuery);

点击下载Demo

jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）的更多相关文章

  1. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  2. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  4. 瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!   前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...

  5. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  6. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  7. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  8. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  9. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

随机推荐

  1. QQ互联OAuth

    /** * QQ互联 oauth * @author dyllen * */ class Oauth { //取Authorization Code Url const PC_CODE_URL = ' ...

  2. [Eclipse] Eclipse配置Tomcat插件

    1 . Eclipse IDE 3.6 for Java EE Developersat- 5.5.28 或者以上版本 : 2 . 安装 Tomcat 插件 , 文件名: tomcatPluginV3 ...

  3. Kmeans聚类算法原理与实现

    Kmeans聚类算法 1 Kmeans聚类算法的基本原理 K-means算法是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一.K-means算法的基本思想是:以空间中k个点为中心进行聚类,对 ...

  4. World of Warcraft

    一大堆快捷键 鼠标中键:致盲 上滚:闪避 下滚:疾跑 通用:~伺机待发 Q加速 E斗篷 R徽章 T消失 alt+Q脚踢,alt+W毒刃 alt+E亡灵意志 alt+D烟幕弹 alt+F死亡标记 Z天降 ...

  5. 在windows系统的文件右键菜单中增加“命令提示符”

    本实用小工具能够在windows系统的文件右键菜单中增加“命令提示符”,方便快速进入制定文件的命令提示窗口,避免逐层输入或复制文件夹路径,极其实用. 工具下载地址如下:360云盘(访问密码:5b71) ...

  6. 智能车学习(十七)——舵机学习

    一.舵机的结构      舵机简单的说就是集成了直流电机.电机控制器和减速器等,并封装在一个便于安装的外壳里的伺服单元.能够利用简单的输入信号比较精确的转动给定角度的电机系统.舵机安装了一个电位器(或 ...

  7. Understanding, Operating and Monitoring Apache Kafka

    Apache Kafka is an attractive service because it's conceptually simple and powerful. It's easy to un ...

  8. 【设计模式】MVC模式

    MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO.它 ...

  9. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  10. 【maven】 pom.xml内容没有错，但一直报错红叉 解决办法

    1.首先看一下下面的这两个项目,一个是新建的,一个是原来的老项目 2.myEcplise中是点击如下图 Maven4MyEcplise, Ecplise中也是右键,只不过点击Mavene而已,两个一样 ...