팥맛나는팥빵
20
2021-06-11 17:29:18
0
51

javascript 슬라이드 기능 코딩중인 코린이 질문드립니다.



// 슬라이드 이미지 변수 저장
const slide = document.querySelectorAll('.myslide');

// 각 버튼 및 변경 항목 저장 저장
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const dots = document.querySelectorAll('.dot');
const numbertxt = document.querySelectorAll('.numbertext');
const contxt = document.querySelectorAll('.text');
const boxes = document.querySelector('.slideshow-container')

// 슬라이드 초기 값 설정
let click = 0;
let move = click; // 슬라이드 쇼 변수


//슬라이드 출력
function slideimg() {
  slide[move].style.display = 'block';
  dots[move].classList.add('active');
  numbertxt[move].textContent = `${move+1} / ${slide.length}`;
  contxt[move].textContent = `Cruella ${move+1}`;
};
slideimg();

//이미지 초기화
const clearSlide = () => {
  for(let i = 0; i < slide.length; i++ ){
    slide[i].style.display = 'none';
    dots[i].classList.remove('active');
  };
};

//이미지 슬라이드 기능
function slideShow(){
  clearSlide();


  if(move > slide.length-1){
    move = 0;
  } else if (move < 0){
    move=slide.length-1;
  };
  slideimg();
  move += 1;
  
  let stop;
  stop = setTimeout("slideShow()", 2000);

  
  document.querySelector('section').addEventListener("mouseover", ()=>{
    clearTimeout(stop);

  });
  document.querySelector('section').addEventListener("mouseout", ()=>{
    stop = setTimeout("slideShow()", 2000);

  });
  return move;
};
slideShow();

//이전 버튼 클릭시
prev.addEventListener('click', function(){
  clearSlide();
  click -= 1;
  if (click < 0){
    click=slide.length-1;
  }
  move = click;
  slideimg();

});
//다음 버튼 클릭시
next.addEventListener('click', function(){
  clearSlide();
  click += 1;
  if(click > slide.length-1){
    click = 0;
  }
  move = click;
  slideimg();

});


//각각의 닷 버튼 지정
for(let n = 0; n < dots.length; n++){
  dots[n].addEventListener('click', function(){
    activeDot(n);
  });
}

//닷 버튼 클릭시 슬라이드 이동
function activeDot(n){
  clearSlide();
  move = n;
  slideimg();
};

3초마다 이미지 슬라이드가 변경되는 기능에서 마우스를 이미지에  mouseover 하게 되면 setTimeout이 멈추고 다시 이미지에서 mouseout 하게 되면 슬라이드가 실행되는 기능을 만들고 있습니다. 물론 prev, next, dot 버튼도 동작이 되구요.. 그런데 변수가 잘못된건지 2~3 loop 하다보면 난리가 납니다.. 혹시 코드를 정리하는데 도움을 받을 수 있을까요?

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.