jqurey相册放大浏览效果。

/*图片弹窗与切换*/
function honorLayer(){
  var honorArray =  honorArr();
  var $msk = $('.js-mask'),$layer = $('.js-honor-layer'),$close = $('.js-hl-close');
  var $honorpic = $('.js-honorpic');
  var $showpic = $('#js-honorshow');
  var showpic = document.getElementById('js-honorshow')
  if(showpic) {
    var showpicBg = showpic.style.backgroundImage;
    showpicBgstr = showpicBg.substring(5,showpicBg.length-2);
  }
  var index = 0;
  var $prev = $('.js-prev'),$next = $('.js-next');
  $honorpic.on('click',function(){
    $msk.fadeIn()
    $layer.fadeIn()
    var src = $(this).attr('src');
    index = honorArray.indexOf(src);
    $showpic.attr('data-index',index)
    src='url("'+src+'")';
    document.getElementById('js-honorshow').style.backgroundImage = src;
    return index;
  })
  $close.on('click',function(){
    $msk.fadeOut()
    $layer.fadeOut()
  })
  $msk.on('click',function(){
    $msk.fadeOut()
    $layer.fadeOut()
  })

  $prev.on('click',function () {
    honpicPrev()
  })
  $next.on('click',function () {
    honpicNext()
  })
}
/*图片组成数组*/
function honorArr(){
  var $honorpic = $('.js-honorpic');
  var honorArray = [];

  for(var i=0,l=$honorpic.length;i<l;i++){
    honorArray = honorArray.concat($honorpic.eq(i).attr('src'))
  }
  return honorArray
}
function honpicPrev(){
  var honorArray =  honorArr();
  var $honorshow = $('#js-honorshow');
  var src = '';
  var e = $honorshow.attr('data-index')
    e--;
  if(e<0){
      e=honorArray.length-1;
  }
  src = 'url("'+honorArray[e]+'")';
  document.getElementById('js-honorshow').style.backgroundImage = src;
  $honorshow.attr('data-index',e)
}
function honpicNext(){
  var honorArray =  honorArr();
  var $honorshow = $('#js-honorshow');
  var e = $honorshow.attr('data-index')
  console.log(e);
  var src = ''
    e++;
  if(e==honorArray.length){
      e=0;
  }
  src = 'url("'+honorArray[e]+'")';
  console.log(honorArray[e]);
  document.getElementById('js-honorshow').style.backgroundImage = src;
  $honorshow.attr('data-index',e)
}

  <div class="honor-layer js-honor-layer">
        <div class="hl-close js-hl-close">
          ×
        </div>
        <div class="honor-pic-l-w">
          <div class="honor-pic-l" id="js-honorshow" style="background-image:url('<{$t_url}>images/b21.jpg')" data-index="">
          </div>
          <a href="javascript:;" class="honor-pic-prev js-prev" ></a>
          <a href="javascript:;" class="honor-pic-next js-next" ></a>
        </div>

    </div>