좌우로클릭슬라이드

박범준·2021년 7월 30일
0
var arr = [
{
img: "img/img-0.jpg",
name: "이름 0",
txt: "설명 0"
},
{
img: "img/img-1.jpg",
name: "이름 1",
txt: "설명 1"
},
{
img: "img/img-2.jpg",
name: "이름 2",
txt: "설명 2"
},
{
img: "img/img-3.jpg",
name: "이름 3",
txt: "설명3"
}
];

var i = 0;
document.querySelectorAll('.btn').forEach(function(element,index){
	
    element.addEventListener('click',function(e){
		e.preventDefault(); // a버튼 #이동으로 상단으로 이동 금지
    
    	if(e.target.classList.contains('prevBtn')){
    
    		if(i===0){			//0
            	index=arr.length; //4
            }
        	i--;  //3
            document.getElementById('img').src=arr[index].img;
            document.getElementById('name').src=arr[index].name;
            document.getElementById('txt').src=arr[txt].name;
            }
    	if(e.target.classList.contains('nextBtn')){
    
    		if(i===arr.length -1){//3
        	i = -1; //-1
        	}
          i++;//1
          document.getElementById('img').src=arr[index].img;
          document.getElementById('name').src=arr[index].name;
          document.getElementById('txt').src=arr[txt].name;
        
    }
    
})
}
profile
HTML/CSS/JAVASCRIPT

0개의 댓글