자바스크립트 버튼 이벤트

 

 

아... 뭐지... 인덱스 이렇게 찾아진다고??

나 전에 왜 그리 복잡하게 찾았지?? ㅎㅎ;;;

슬라이딩 배너에서 각 슬라이드 버튼 클릭시 이벤트 부분.

-css-
.visual-slide-item{
	display: none;
	opacity:0;
}
    
.visual-slide-item:nth-of-type(1){
	display:block;
	opacity:1;
}
    
    
let item = document.querySelectorAll('.section2-container li');
let dotBtn = document.querySelectorAll('.section2-button-box span');
let index =0;
    
//오버레이
let slideinbBtnEvent = function slidingEvent(btn,item,current,next){

	btn[next].classList.add('active');
	item[next].style.display= 'block';
        //배너에 링크가 걸려있는 경우 위에 쌓인 요소로 인해 클릭이 안되는 현상을 방지하기 위해
          요소 전체에 none을 설정 후 해당 요소만 block으로 바꿔줌.
	item[next].style.opacity= '1';
	item[next].style.transition= '1.5s';

	btn[current].classList.remove('active');
	item[current].style.opacity= '0';
	item[current].style.transition= '1.5s';
	setTimeout(function(){
		item[current].style.display= 'none';
	},1501); //트렌지션보다 먼저 적용되지 않도록함.

};
    
for(let i=0; i<itemLength; i++){
	dotBtn[i].addEventListener('click',function(e){	
		let current	= index;
		let next = i;
		slideinbBtnEvent(dotBtn,item,current,next);
		index=i;
	});
}