FE (Front End) (구)/javascript
js. slideimage (슬라이드 이미지)
B_Tae
2022. 2. 15. 23:05
버튼 클릭 시 이동하는 슬라이드 이미지
let slideImage = document.querySelectorAll("#slideImage > img"); //이미지 가져오기
let prev = document.getElementById("prev"); // 이전 버튼 가져오기
let next = document.getElementById("next"); // 다음 버튼 가져오기
let current = 0;
prev.onclick = prevSlide; // 이전 버튼 클릭 시 함수 실행
next.onclick = nextSlide; // 다음 버튼 클릭 시 함수 실행
function changeSlide(n){
for( let i = 0 ; i < slideImage.length; i++){
slideImage[i].style.display = "none"; // 반복문을 통해 모든 이미지 none
}
slideImage[n].style.display = "block"; // 해당 값에 이미지 block
}
function prevSlide(){
if(current > 0){ // 현재 이미지가 처음이 아니라면
current -= 1; // 현재 이미지에서 -1로 이동
}else{
current = slideImage.length - 1; // 현재 이미지가 처음이라면 마지막 이미지로 이동
}
changeSlide(current); // 함수 실행
}
function nextSlide(){
if(current < slideImage.length - 1){ // 현재 이미지가 마지막이 아니라면
current +=1; // +1 이미지로 이동
}else{
current = 0; // 마지막이라면 처음 이미지로 이동
}
changeSlide(current); // 함수 실행
}