<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 1000px;
height: 400px;
}
#wrap div {
width: 100%; height: 100%;
color: bisque;
line-height: 400px;
text-align: center;
font-size: 50px;
position: absolute;
top: 0;
left: 0;
display: none;
}
#wrap .box1{background-color: dodgerblue; display: block;}
#wrap .box2{background-color: tomato}
#wrap .box3{background-color: darkseagreen}
#wrap .box4{background-color: mediumpurple}
#wrap .box5{background-color: turquoise}
.arrow {
list-style: none;
padding: 0;
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 0 5%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
button { padding: 20px 30px; }
.auto {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box1 view">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>
<ul class="arrow">
<li class="prv">
<button>Prev</button>
</li>
<li class="nxt">
<button>Next</button>
</li>
</ul>
<button class="auto">Auto play</button>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// nxt를 클릭하면 현재 슬라이드에서 다음 슬라이더로 전환.
// 마지막 슬라이드일 경우 첫 슬라이드로 돌아오기.(infinite)
// 화면 전환은 fadeIn(), fadeOut()
// $(".nxt").on("click", function() {
// var i = $(".view").index(); // 0
// if(i===4){
// $("#wrap div").eq(0).stop().fadeIn().addClass("view");
// $("#wrap div").eq(0).siblings().stop().fadeOut().removeClass("view");
// } else {
// $("#wrap div").eq(i+1).stop().fadeIn().addClass("view");
// $("#wrap div").eq(i+1).siblings().stop().fadeOut().removeClass("view");
// }
// });
var i = 0;
var boxLength = $("#wrap div").length;
var count;
var autoPlay;
var toggle = true;
function fadeInOut() {
$("#wrap div").eq(count).fadeIn();
$("#wrap div").eq(count).siblings().fadeOut();
}
$(".nxt").on("click", function() {
i++;
count = i % boxLength
console.log(count);
fadeInOut();
});
$(".prv").on("click", function() {
i--;
count = i % boxLength
console.log(count);
fadeInOut();
});
// setInterval(함수, 시간)
$(".auto").on("click", function() {
// setInterval(function() {
// i++;
// count = i % boxLength;
// fadeInOut();
// console.log(count);
// }, 1000);
$(this).toggleClass("play");
var play = $(this).hasClass("play");
if(play === true) { // play는 true or false이기 때문에 play로도 사용 가능
autoPlay = setInterval(function() {
i++;
count = i % boxLength;
fadeInOut();
console.log(count);
}, 1000);
} else {
clearInterval(autoPlay);
}
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.