연속된 이미지들 스크롤이나 슬라이더로 조절하기

이미지를 120장 뿌려놓고 스크롤이나 슬라이더로 조절하기 

<div>Scroll</div>
<div>
  <div id="slideList">
    <p style="display:block;"><img src="slideImg/Picanto_Green_00000.jpg" alt="" /></p>
    <p><img src="slideImg/Picanto_Green_00001.jpg" alt="" /></p>
    <p><img src="slideImg/Picanto_Green_00002.jpg" alt="" /></p>
    <p><img src="slideImg/Picanto_Green_00003.jpg" alt="" /></p>
      이미지 120장 생략 
    <p><img src="slideImg/Picanto_Green_00117.jpg" alt="" /></p>
    <p><img src="slideImg/Picanto_Green_00118.jpg" alt="" /></p>
    <p><img src="slideImg/Picanto_Green_00119.jpg" alt="" /></p>
  </div>
  <div id="slider"></div>
</div>
<div>Scroll</div>

 

$(document).ready(function(){
  var imageList = $('#slideList > p');
  $('#slider').slider({
    slide:function(event, ui){
      var max = $('#slider').slider( "option", "max" );
      var min = $('#slider').slider( "option", "min" );
      var start = 0;
      var end = imageList.size() - 1;
      var imgIndex = parseInt((ui.value - min) * (end - start) / (max - min) + start);
      imageList.css('display', 'none');
      imageList.eq(imgIndex).css('display', 'block');
    }
  });
});

$(window).scroll(function(){
  var sh = $(window).scrollTop();
  var imageList = $('#slideList > p');
  
  if(sh <= 1180 ){
    var imageList = $('#slideList > p');
    var imgIndex = parseInt(sh / 10 + 1);
    console.log(sh, imgIndex);
    imageList.css('display', 'none');
    imageList.eq(imgIndex).css('display', 'block');
  } else if (sh > 1180 ){
    imageList.css('display', 'none');
    imageList.eq(119).css('display', 'block');
  }
});