sliderEffect 만들기
다음 프레임과 같이 이미지가 슬라이드되어 다음이미지를 나타내는 효과를 만들어 보겠습니다.
코드블럭
<!DOCTYPE html>
<html lang="ko">
<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>마우스이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<style>
/* slider_wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img {
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background-color: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
</head>
<body class="img01 bg01 font02">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>슬라이드 이펙트</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!--header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!--footer -->
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격시간(3초)
setInterval(() => {
// 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 // currentIndex
// 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 // nextIndex
let nextIndex = (currentIndex + 1) % sliderCount; //5대신sliderCount
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
}, sliderInterval);
</script>
</body>
</html>보충설명
✨ querySelector 메서드를 사용하여 sliderWrap, sliderImg 변수에 요소를 할당하여 선택자를 만들어 줍니다.
✨ 또한, querySelectorAll 메서드를 사용하여 HTML 문서 내에서 클래스 이름이 slider인 모든 요소를 slider 변수에 할당합니다.
✨ 현재 보이는 이미지를 나타내기 위해 currentIndex 변수를 0으로 설정하여줍니다.
✨ 이미지 갯수를 나타내기 위해 sliderCount 변수에 slider.length로 길이를 할당합니다. 마지막으로 이미지 변경 간격 시간을 나타내기위해 sliderInterval 변수에 3000(3초)을 할당합니다.
✨ setInterval 함수를 사용하여 일정한 시간 간격으로 이미지를 변경하는 반복 작업을 수행합니다.
✨ 각 반복마다 currentIndex 변수를 기준으로 현재 이미지와 다음 이미지의 인덱스를 계산하여 nextIndex 변수에 할당합니다.
이 때, % 연산자를 사용하여 nextIndex가 sliderCount를 초과할 경우, 다시 0부터 시작하도록 설정합니다.
✨ 현재 이미지와 다음 이미지의 투명도를 조절하여 이미지가 서서히 나타나거나 사라지도록 합니다. 이를 위해 opacity CSS 속성을 이용합니다.
currentIndex의 이미지는 투명도를 0으로 설정하여 화면에서 사라지게 하고, nextIndex의 이미지는 투명도를 1로 설정하여 화면에 나타나게 합니다.
✨ 마지막으로 currentIndex 변수를 nextIndex로 변경하여, 다음 반복에서 다음 이미지가 현재 이미지가 되도록 설정합니다.