이 스크립트는 보통 롤링 배너 스크립트, 또는 슬라이드 소스라고 합니다.
일반적으로 한 항목만 보여지게 되고 이전, 다음 버튼을 이용해서 다음 항목을 보여주게 동작하는데
이 소스는 일정한 갯수만큼 보여준 뒤 이동하게 하는 방법입니다.
사용예제 : 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;
});
});
