<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin:0;padding: 0;
}
.row{
position: relative;
}
.row:after{
content: "";clear: both;display: block;
}
#list{
position: relative;
}
#list.animate{
margin-left: 200px;
transition: .5s ease;
}
#list li{
float: left; width: 200px; list-style: none;
}
#list img{
border:1px solid;
}
.active{
background-color: yellow;
}
button{
width: 50px;padding: 5px;
}
img{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="row">
<ul id="list">
<li data-roll="1"><img src="img/1.jpg" /></li>
<li data-roll="2"><img src="img/2.jpg" /></li>
<li data-roll="3"><img src="img/3.jpg" /></li>
</ul>
</div>
<button id="btn_r">next</button>
<script>
function setElementNodeNext(node){
while(node.nodeType !== 1){
node = node.nextSibling;
}
return node;
}
function setElementNodePre(node){
while(node.nodeType !== 1){
node = node.previousSibling;
}
return node;
}
function nodeRotate() {
var list = document.getElementById("list");
var firstChild = list.firstChild,
lastChild = list.lastChild;
function swapNodes(){
// Element 노드 선택
firstChild = setElementNodeNext(list.firstChild);
lastChild = setElementNodePre(list.lastChild);
// 마지막 목록을 처음으로 이동하여 목록을 순환시킴
list.insertBefore(lastChild, firstChild);
// 첫째 element node 선택
firstChild = setElementNodeNext(list.firstChild);
// css 슬라이더 위치 초기화(CSS transition 중단)
list.className = "";
// transitionend 이벤트 리스너 초기화
list.removeEventListener("transitionend", swapNodes);
}
// 슬라이더 이동 효과(css trasition)를 위란 클래스 지정
list.className = "animate";
// list 목록의 트랜지션이 끝난 후, 다음 보여줄 목록들의 배치 수행
list.addEventListener("transitionend", swapNodes);
}
var btn = document.getElementById("btn_r");
btn.addEventListener("click", nodeRotate, false);
</script>
</body>
</html>
