원하는 항목만큼 보여주는 롤링 스크립트 소스

이 스크립트는 보통 롤링 배너 스크립트, 또는 슬라이드 소스라고 합니다.

일반적으로 한 항목만 보여지게 되고 이전, 다음 버튼을 이용해서 다음 항목을 보여주게 동작하는데

이 소스는 일정한 갯수만큼 보여준 뒤 이동하게 하는 방법입니다.

사용예제 : http://codepen.io/eond/pen/jPXQRp

1. html 소스

<a href="#" class="prev">prev</a>
 <a href="#" class="next">next</a>
<div class="box">
 <ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
<li>6</li>
<li>7</li><li>8</li><li>9</li>
 </ul>
 </div>
<hr>
<div class="box2">
 <ul class="list2">
  <li><img src="http://s25.postimg.org/5zg19lunv/img01.jpg" width="100" height="70" alt="1" /></li>
  <li><img src="http://s25.postimg.org/fzfj38vaz/img02.jpg" width="100" height="70" alt="2" /></li>
  <li><img src="http://s25.postimg.org/q5jj8hqbf/img03.jpg" width="100" height="70" alt="3" /></li>
  <li><img src="http://s25.postimg.org/lyyot5qpn/img04.jpg" width="100" height="70" alt="4" /></li>
  <li><img src="http://s25.postimg.org/7v7eyi8vv/img05.jpg" width="100" height="70" alt="5" /></li>
  <li><img src="http://placehold.it/100x70" alt="6" /></li>   
 </ul>
 
</div>

2. css 소스

.box{height:70px;width:300px;border:4px solid red;margin-left:100px;/* overflow:hidden; */}
.list{margin:0;padding:0;width:600px;}
.list li{float:left;list-style:none;margin:0;padding:0;position:relative;width:100px;text-align:center;line-height:70px;}
.list2 {margin-left:65px}
.list2 li{float:left;}

3. js 소스

$(function(){
 var wd = $(".list li").width();
  var bb = $(".box").width();
 var max = wd * $(".list li").size();
 $(".list").width(max);
  $(".list li:lt(6)").appendTo(".list")
 $(".list").css("margin-left",-bb)
  //$(".list li:gt(2)").prependTo(".list") // .list 에서 0부터 2 이후의 값을 찾아 .list의 앞에 붙여준다.
 //$(".list").css("margin-left",-bb) //.list에서 마진값으로 박스 넓이만큼 왼쪽으로 밀어줘서 앞에 붙여진 항목들을 숨겨준다.
  //$(".list li:lt(3)").appendTo(".list"); // 4번째 이전의 항목을 list 뒤에 추가한다.
  //$(".list li:gt(3)").appendTo(".list");
  //$(".list li:last").append(".list li:lt(3)");
 $(".next").click(function(){
  $(".list").animate({
   marginLeft : parseInt($(".list").css("margin-left"))-bb+"px"
  },"swing",function(){
      //$(".list li:gt(2)").appendTo(".list");
   $(".list li:lt(3)").appendTo(".list")
     $(".list").css("margin-left",-bb)
  });
  return false;
 });

 $(".prev").click(function(){
  $(".list").animate({
   marginLeft : parseInt($(".list").css("margin-left"))+bb+"px"
  },"swing",function(){
      /* 9개일 경우 */
      $(".list li:gt(5)").prependTo(".list") //2이하일 경우 list 앞에 붙여준다.
      $(".list").css("margin-left",-bb)
      /*
      6개일 경우
      //$(".list li:gt(2)").prependTo(".list")
     //$(".list").css("margin-left",-bb)  
      */
  })
  return false;
 });
});