<!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>
<style>
li {
border: 0px solid red;
width: 600px;
height: 400px;
list-style: none;
box-sizing: border-box;
float: left;
}
ul {
width: 2400px;
height: 400px;
border : 0px solid blue;
padding: 0;
margin: 0;
position: absolute;
/* transition은 적용 할 속성이 초기화 되어야 한다 */
left : 0px;
transition: left .5s cubic-bezier(.17,.67,.83,.67);
}
div#box {
position: relative;
border: 1px solid black;
width: 600px;
height: 400px;
overflow:hidden;
}
#box > button {
width: 50px;
height: 40px;
text-align: center;
position: absolute;
top: 180px;
z-index: 1;
}
#rightBtn {
left: 550px;
}
#box > div.message {
position: absolute;
top: 180px;
left: 260px;
display: none;
}
#box li img {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h1>대구 팔공산 갓바위</h1>
<hr>
<div id="box">
<div class="message">마지막입니다!</div>
<button id="leftBtn">Left</button>
<button id="rightBtn">Right</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
let boxUl = document.querySelector("#box>ul");
let boxLis = document.querySelectorAll("#box li");
let leftBtn = document.querySelector("#leftBtn");
let rightBtn = document.querySelector("#rightBtn");
let message = document.querySelector("#box > .message");
let imgs = ["img01","img02","img03","img04"];
boxLis.forEach((item, i) => {
item.innerHTML = "<img src='images/"+imgs[i]+".jpg'>";
});
let x = 0;
let idx = 0;
let step = -600;
leftBtn.addEventListener('click', (e)=>{
idx++;
if(idx >= 4) {
message.innerText = "마지막입니다!";
message.style.display = "block";
setTimeout(()=>{message.style.display = "none";}, 1000);
idx = 4;
} else {
x = idx * step;
boxUl.style.left = x + "px";
}
}, true);
rightBtn.addEventListener('click', (e)=>{
idx--;
if(idx < 0) {
message.innerText = "처음입니다!";
message.style.display = "block";
setTimeout(()=>{message.style.display = "none";}, 1000)
idx = 0;
} else {
idx = idx>=3 ? 2 : idx;
x = idx * step;
boxUl.style.left = x + "px";
}
}, true);
</script>
</body>
</html>
