←            
       →            
       ×        
      
 　　　　//另一种        
      
       -->
      
     

yao.css(一种效果)

.imgLeft-2 {
       width: 742px;    height: 526px;    float: left;    margin-right: 5px;}.imgLeft-2 img {
       width: 742px;    height: 526px;}.imgRight-2 {
       width: 232px;    height: 551px;    float: left;    overflow: hidden;}.imgRight-2 img {
       width: 232px;    display: block;    height: 172px;}.imgRight-2 img:not(:last-child) {
       margin-bottom: 5px;}

yao.css(另一种效果)

#lightbox_mask {
       display: none;    position: fixed;    z-index: 999;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, .7);}#lightbox_popup {
       display: none;    position: fixed;    z-index: 1000;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);}#lightbox_popup .pic-view .pic {
       border-radius: 4px;}#lightbox_popup .btn-view .btn {
       position: absolute;    width: 30px;    height: 30px;    line-height: 30px;    text-align: center;    font-size: 24px;    text-decoration: none;    border-radius: 30px;    background-color: #000;    color: #fff;    padding: 0;    border: 2px solid #fff;    display: none !important;}#lightbox_popup:hover {
       cursor: pointer;}#lightbox_popup:hover .btn {
       display: block !important;}#lightbox_popup .btn-view .btn-prev {
       left: 10px;    top: 50%;    transform: translateY(-50%);    -webkit-transform: translateY(-50%);}#lightbox_popup .btn-view .btn-next {
       right: 10px;    top: 50%;    transform: translateY(-50%);    -webkit-transform: translateY(-50%);}#lightbox_popup .btn-view .btn-prev span {
       width: 6px;    height: 6px;    top: 50%;    left: 40%;    position: absolute;    border-right: 3px solid #fff;    border-top: 3px solid #fff;    -webkit-transform: translate(0,-50%) rotate(-135deg);    transform: translate(0,-50%) rotate(-135deg);}#lightbox_popup .btn-view .btn-next span {
       width: 6px;    height: 6px;    top: 50%;    left: 30%;    position: absolute;    border-left: 3px solid #fff;    border-bottom: 3px solid #fff;    -webkit-transform: translate(0,-50%) rotate(-135deg);    transform: translate(0,-50%) rotate(-135deg);}

 

lightbox.js

;(function ($, window, document, undefined) {
     var Lightbox = function (elem, options) {    var self = this;    this.$elem = elem;    this.$pic_item = this.$elem.find('.lightbox-pic');    this.$popMask = $('#lightbox_mask');    this.$popWin = $('#lightbox_popup');    this.$picView = this.$popWin.find('.pic-view');    this.$pic = this.$picView.find('.pic');    this.$btn_prev = this.$popWin.find('.btn-prev');    this.$btn_next = this.$popWin.find('.btn-next');    this.$btn_close = this.$popWin.find('.btn-close');    this.$caption = this.$popWin.find('.caption-view > p');    this.groupName = null;    this.groupData = [];    this.index = 0;    this.pic_t = 0;    this.b_stop = true;    this.defaults = {      ifChange: false    };    this.opts = $.extend({}, this.defaults, options);  };  Lightbox.prototype = {
       changePic: function () {      var self = this;      this.$pic.attr('src', this.groupData[this.index].src);      this.$caption.text(this.groupData[this.index].caption);    },    btnSwitch: function () {
         var self = this;      this.$btn_prev.click(function () {        if (self.index <= 0) {          self.index = self.groupData.length - 1;        } else {
             self.index --;        }        self.changePic();      });      this.$btn_next.click(function () {
           if (self.index >= self.groupData.length - 1) {          self.index = 0;        } else {
             self.index ++;        }        self.changePic();      });    },    showPop: function (curSrc) {
         this.$popMask.fadeIn();      this.$popWin.fadeIn();      this.$pic.attr('src', curSrc);      this.$caption.text(this.groupData[this.index].caption);      this.autoTop($(window).height(), this.$pic.height());    },    initalPop: function () {
         var self = this;      var curSrc = null;      var curId = null;      this.$pic_item.click(function () {        var curGroup = $(this).attr('data-group');        curSrc = $(this).attr('data-source');        curId = $(this).attr('data-id');        if (self.groupName !== curGroup) {          self.groupName = curGroup;          self.getGroupData();        }        self.index = self.getIndexOf(curId);        self.showPop(curSrc);        self.btnSwitch();        if (self.opts.ifChange) {
             self.$btn_prev.show();          self.$btn_next.show();        } else {
             self.$btn_prev.hide();          self.$btn_next.hide();        }      });      $(window).resize(function () {
           self.autoTop($(window).height(), self.$pic.height());      });      this.$btn_close.click(function () {
           self.$popMask.fadeOut();        self.$popWin.fadeOut();      });      this.$popMask.click(function () {
           self.$popMask.fadeOut();        self.$popWin.fadeOut();      });    },    // 小方法    autoTop: function (win_h, pic_h) {
         var pic_t = (win_h - 38 - pic_h - 10) / 2;      if (pic_t <= 0) {        pic_t = 0;      }      this.$picView.css({
   top: pic_t});    },    getGroupData: function () {
         var self = this;      this.groupData.length = 0;      this.$pic_item.each(function () {        self.groupData.push({          id: $(this).attr('data-id'),          src: $(this).attr('data-source'),          caption: $(this).attr('data-caption')        });      });    },    getIndexOf: function (curId) {
         var index = 0;      $(this.groupData).each(function () {        if (this.id === curId) {          return false;        } else {
             index ++;        }      });      return index;    },    constructor: Lightbox  };  $.fn.lightbox = function (options) {
       var lightbox = new Lightbox(this, options);    return lightbox.initalPop();  };})(jQuery, window, document);