灯箱效果(点击小图 弹出大图集 然后轮播)

　　<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>灯箱</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Houyuqing">
    <link rel="stylesheet" type="text/css" href="../css/yao.css">
</head>
<body>
    <div class="bodyBox">
        <div class="imgBox" id="lightbox_1">
            <div class="imgLeft-2">
                <img src="../images/01.jpg" alt="01.jpg" class="lightbox-pic" data-source="../images/01.jpg">
            </div>
            <div class="imgRight-2">
                <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
                <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
                <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
            </div>
        </div>
    </div>
    <!--弹出层-->
    <div id="lightbox_mask"></div>
    <div id="lightbox_popup">
        <div class="pic-view">
            <img src="../images/05.jpg" alt="#" class="pic">
        </div>
        <div class="btn-view">
            <a href="#" class="btn btn-prev">←</a>
            <a href="#" class="btn btn-next">→</a>
            <a href="#" class="btn btn-close">×</a>
        </div>
　　　　//另一种

       <div class="btn-view">-->
           <!--<a href="#" class="btn btn-prev">-->
           <!--<span></span>-->
           <!--</a>-->
           <!--<a href="#" class="btn btn-next">-->
           <!--<span></span>-->
           <!--</a>-->
       <!--</div>
    </div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/lightbox.js"></script>
    <script>
        //        初始化图片弹出框
        $(function () {
            $('#lightbox_1').lightbox({
                ifChange: true
            });
        });
    </script>
</body>
</html>

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);







 






        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/candy-Yao/p/8608796.html