728x90
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이)
이번에는 지금까지 했던 기능들에 자동플레이, 플레이 버튼, 정지 버튼이 추가되었습니다.
자바스크립트 방식
슬라이드 효과를 위한 자바스크립트 작성법입니다. 자동으로 슬라이드가 재생되며, 플레이버튼, 정지버튼을 통해 슬라이드를 정지 또는 재생시킬 수 있습니다. 또한, 이미지 위에 마우스를 올리면 슬라이드가 멈추고, 다시 마우스를 떼면 슬라이드가 재생됩니다.
const sliderWrap = document.querySelector(".slider__wrap"); // 전체 이미지 슬라이드
const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역
const slider = document.querySelectorAll(".slider"); // 각각의 이미지
const sliderDot = document.querySelector(".slider__dot"); // 닷메뉴
const sliderBtn = document.querySelector(".slider__btn"); // 버튼
const sliderBtnPrev = document.querySelector(".slider__btn .prev"); // 왼쪽 버튼
const sliderBtnNext = document.querySelector(".slider__btn .next"); // 오른쪽 버튼
// const sliderBtnPlay = document.querySelector(".slider__dot .play"); // play 버튼
// const sliderBtnStop = document.querySelector(".slider__dot .stop"); // stop 버튼
let currentIndex = 0, // 현재 이미지
sliderLength = slider.length, // 슬라이더 갯수
sliderWidth = slider[0].offsetWidth, // 슬라이더 크기
sliderFirst = slider[0], // 첫 번째 이미지
sliderLast = slider[sliderLength - 1], // 마지막 이미지
cloneFirst = sliderFirst.cloneNode(true), // 첫 번째 이미지 복사
cloneLast = sliderLast.cloneNode(true), // 마지막 이미지 복사
dotIndex = "",
interval = 3000, // 3초
sliderTimer = "";
function init() {
imgClone(); // 이미지 복사
createDot(); // 닷 버튼 생성
autoPlay(); // 자동 재생
}
init();
function autoPlay() {
sliderTimer = setInterval(() => {
let intervalNum = currentIndex + 1; // currentIndex 값이 계속 증가해야 하니까
gotoSlider(intervalNum)
}, interval) // 3초에 한 번씩 반복
}
function stopPlay() {
clearInterval(sliderTimer); // clearInterval => setinterval 막아주기
}
function imgClone() {
sliderInner.appendChild(cloneFirst); // appendChild(마지막 자식) => sliderInner의 마지막 자식에 첫 번째 이미지 복사
sliderInner.insertBefore(cloneLast, sliderFirst);
}
function createDot() {
for (let i = 0; i < sliderLength; i++) { // for문 이용해서 닷메뉴 추가
dotIndex += "<a href='#'' class='dot'>이미지1</a>";
}
dotIndex += "<a href='#'' class='play'></a>" // play 버튼
dotIndex += "<a href='#'' class='stop'></a>" // stop 버튼
sliderDot.innerHTML = dotIndex;
sliderDot.firstChild.classList.add("active"); // 첫 번째 이미지에만 active 생기게
}
function gotoSlider(index) {
sliderInner.classList.add("transition"); // transition 효과 css로 주기
let posInitial = sliderInner.offsetLeft; // -800
sliderInner.style.left = -sliderWidth * (index + 1) + "px";
currentIndex = index; // 현재 이미지에 index값 넣어서 계속 증가하게
}
function checkIndex() {
sliderInner.classList.remove("transition"); // 순간이동 할 때는 transition 효과 제거
// 마지막 이미지
if (currentIndex == sliderLength) {
sliderInner.style.left = -(1 * sliderWidth) + "px";
currentIndex = 0;
}
// 처음 이미지
if (currentIndex == -1) {
sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
currentIndex = sliderLength - 1;
}
// 두번째 이미지를 보면 두번째 닷에 클래스 추가
let dotActive = document.querySelectorAll(".slider__dot .dot"); // 개별의 닷메뉴
dotActive.forEach(el => el.classList.remove("active")); // 1. 닷메뉴 클래스 모두 삭제
dotActive[currentIndex].classList.add("active"); // 2. 해당 이미지의 해당 닷메뉴에 클래스 추가
}
// prev 버튼 클릭하면
sliderBtnPrev.addEventListener("click", () => {
let prevIndex = currentIndex - 1;
gotoSlider(prevIndex);
});
// next 버튼 클릭하면
sliderBtnNext.addEventListener("click", () => {
let nextIndex = currentIndex + 1;
gotoSlider(nextIndex);
});
// 재생 버튼 클릭하면
document.querySelector(".slider__dot .play").addEventListener("click", () => {
// alert("ddd")
document.querySelector(".slider__dot .play").style.display = "none";
document.querySelector(".slider__dot .stop").style.display = "inline-block";
autoPlay();
})
// 정지 버튼 클릭하면
document.querySelector(".slider__dot .stop").addEventListener("click", () => {
// alert("ddd")
document.querySelector(".slider__dot .stop").style.display = "none";
document.querySelector(".slider__dot .play").style.display = "inline-block";
stopPlay();
})
// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => { // 위에서 이미 쓴 선택자지만 지역변수라 못 씀
dot.addEventListener("click", () => {
gotoSlider(index);
})
})
sliderInner.addEventListener("mouseenter", stopPlay); // 마우스 오버하면 자동재생 멈추게
sliderInner.addEventListener("mouseleave", autoPlay); // 마우스 떼면 다시 자동재생
sliderInner.addEventListener("transitionend", checkIndex); // transitionend : transition이 끝났을 때 => transition이 끝나면 순간이동 위해 checkIndex 함수 실행
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 07 (1) | 2022.10.23 |
|---|---|
| SEARCH Effect 06 (1) | 2022.10.23 |
| SLIDER Effect 06 (1) | 2022.10.23 |
| SLIDER Effect 05 (1) | 2022.10.23 |
| PARALLAX Effect 07 (3) | 2022.10.10 |
댓글