サムネイル付きギャラリー

$(function(){

    var limit = 4;
    var nav_width = 24;

    var ele = {};
    ele.panel = $('#exposure-panel');
    ele.thumbs = ele.panel.find('#images li');
    ele.controll = $('#controls');
    ele.image = $('#exposure');
    ele.image.append('<img>');

    var max = ele.thumbs.size();
    var page_max = Math.ceil(max / limit);
    var page_current = 1;

    var readyControll = function(){
     ele.c_ul = $('<ul>');
      for(var i=1;i<=page_max;i++){
        var e_li = $('<li>').text(i);
        ele.c_ul.append(e_li);
      }
      ele.controll.append(ele.c_ul);
      ele.controll.append('<div class="prev">&lt;</div>');
      ele.controll.append('<div class="next">&gt;</div>');
      ele.c_li = ele.c_ul.find('li');
    }
    var changePage = function(page){
      ele.thumbs.hide();
      page_current = page;
      page = page_current;
      var index = page - 1;
      ele.c_li.removeClass('current');
      ele.c_li.eq(index).addClass('current');
      var start = limit * index;
      var end = start + limit;
      console.log(start);
      console.log(end);
      ele.thumbs.slice(start,end).show();
      changeImage(start);
      changeCotrollArrowState();

      if(page_current>=page_max){
        var left = - (page_current - 3) * nav_width;
        ele.c_ul.css('left', left);
      } else if(page_current <= 1){
        ele.c_ul.css('left', 0);
      } else {
        var left = - (page_current - 2) * nav_width;
        ele.c_ul.css('left', left);
      }
    }

    var changeCotrollArrowState = function(){
      if(page_current>=page_max){
        ele.controll.find('.next').hide();
      } else {
        ele.controll.find('.next').show();
      }
      if(page_current <= 1){
        ele.controll.find('.prev').hide();
      } else {
        ele.controll.find('.prev').show();
      }
    }

    var changeImage = function(index){
        var target = ele.thumbs.eq(index)
        ele.thumbs.removeClass('current');
        target.addClass('current');
        var e_a = target.find('a');
        var src = e_a.attr('href');
        src = src.replace(/\/test/, '');
        var e_img = $('<img>').attr('src', src);
        $('#exposure').find('img').attr('src', src);
    }
    var readyEvent = function(){
      ele.controll.on('click', 'li', function(){
        var page = $(this).text();
        changePage(page);
      });
      ele.controll.on('click', '.next', function(){
        page_current++;
        if(page_current >= page_max){
          page_current = page_max
        }
        changePage(page_current);
      });
      ele.controll.on('click', '.prev', function(){
        page_current--;
        if(page_current <= 1){
          page_current = 1
        }
        changePage(page_current);
      });
      ele.thumbs.click(function(){
        var index = $(this).index();
        changeImage(index);
        return false;
      });
    }

    if(ele.panel.size()){
      readyControll();
      readyEvent();
      changePage(1);
      changeImage(0);
    }

});

@charset "UTF-8";



/*///////////////////////////////  .exposure gallery
*/
#exposure-panel{
  width:800px;
  margin:0px 20px;
}
#exposure-panel:after{
  display:block;
  content:"";
  clear:both;
}
#exposure{
  position:relative;
  left:0px;
  top:0px;
  width:600px;
  min-height:600px;
  float:left;
}
#exposure img{
  position:absolute;
  left:0px;
  top:0px;
  width:600px;
  height:600px;
}
#controls{
  position:relative;
  left:0px;
  top:0px;
  width:120px;
  height:40px;
  line-height:40px;
  float:left;
  background-color:#000000;
  color:#FFFFFF;
  overflow:hidden;
}
#controls:after{
  display:block;
  content:"";
  clear:both;
}
#controls ul{
  position:absolute;
  left:0px;
  top:0px;
  margin:0px 24px;
}
#controls ul:after{
  display:block;
  content:"";
  clear:both;
}
#controls ul li{
  width:24px;
  height:40px;
  line-height:40px;
  text-align:center;
  float:left;
  cursor:pointer;
}
#controls ul li.current{
  background-color:#555555;
  color:#FFFFFF;
}


#controls .prev,
#controls .next{
  position:absolute;
  left:0px;
  top:0px;
  display:block;
  width:24px;
  text-align:center;
  background-color:#000000;
  color:#FFFFFF;
  z-index:3;
  cursor:pointer;
}

#controls .prev{
  position:absolute;
  left:0px;
  top:0px;
}
#controls .next{
  position:absolute;
  left:auto;
  right:0px;
  top:0px;
}
#controls .exposurePaging{
  margin:0px 30px;
}

#controls .exposurePaging span,
#controls .exposurePaging a{
  display:block;
  width:20px;
  text-align:center;
  float:left;
  background-color:#F0A4B3;
  color:#FFFFFF;
}
#controls .exposurePaging span,
#controls a:hover{
  background-color:#E24867;
  color:#FFFFFF;
}

#exposure-panel #images{
  width:120px;
  float:left;
}
#exposure-panel #images li{
  width:120px;
  height:120px;
  opacity:.5;
}
#exposure-panel #images li.current{
  opacity:1;
}
#exposure-panel #images a{
  display:block;
  width:100%;
  height:100%;
}

#exposure-panel #images a:after{
  display:block;
  content:"";
  clear:both;
}

#exposure-panel #images img{
  width:120px;
  height:120px;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-gallery-thumbs/