js
$(function() {
var length = $(".container a").length;
var $items = $(".container a")
$items.on("transitionend", function(event) {
$items.removeClass("trans");
})
$(".container a").each(function(index, value){
var $child = $( this);
if (index === 0) {
$child.addClass("현재 표시 중")
} else if (index === 1) {
$child.addClass ("왼쪽 표시");
} else if (index == 2) {
$child.addClass("out-left")
} else if (index == (length - 2) ) {
$child.addClass("오른쪽으로 표시");
} else if (index === (length - 1)) {
$child.addClass("오른쪽으로 표시")
} else {
$child.addClass("hiding");
}
$child.click(function(){
var $item = $( this);
//다음 항목
var $nextItem = (index === (length - 1)) ? $items.eq(0) : $items.eq(index 1)/ /이전 항목
var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1)
var $rightItem
if( index == 0){
$rightItem = $items.eq(length - 2);
} else if (index == 1) {
$rightItem = $items.eq(length - 1);
} else {
$rightItem = $items.eq(index - 2);
}
var $leftItem;
if(index == length - 2){
$leftItem = $items.eq(0);
} else if (색인 == 길이 - 1) {
$leftItem = $items.eq(1);
} else {
$leftItem = $items.eq(색인 2);
}
//현재 항목 클릭, return
if ($item.hasClass("current")) {
return false;
} else if ($item.hasClass("left")) {
//가운데 오른쪽으로 이동
$preItem.attr("class","trans 오른쪽 표시");
//가운데 왼쪽으로 이동
$item.attr("class","trans current presents");
//오른쪽 항목 이동
$rightItem.attr("class","trans out-right");
//다음 왼쪽으로 이동
$nextItem.attr("class","trans left presents");
//왼쪽 준비
$leftItem.attr("class","out-left");
} else if ($item.hasClass("right")) {
//가운데 왼쪽으로 이동
$nextItem.attr("class","trans left presents");
//가운데 오른쪽으로 이동
$item.attr("class","trans current presents");
//왼쪽 항목 지우기
$leftItem.attr("class","trans out-left");
//이전 오른쪽으로 이동
$preItem.attr("class","trans 오른쪽 표시");
//맞습니다
$rightItem.attr("class","out-right");
};
});
});
});
html
