/*图片弹窗与切换*/

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>