[자바스크립트] 이미지 무한슬라이드 만들기...

<div class="windowcon">
            <div class="container">
                <img src="./img/img_01.jpg">
                <img src="./img/img_02.jpg">
                <img src="./img/img_03.jpg">
                <img src="./img/img_04.jpg">
                <img src="./img/img_05.jpg">
                <img src="./img/img_06.jpg">
                <img src="./img/img_01.jpg">                
            </div>
        </div>
 

여기서 중요한점은 이미지 6번뒤에 다시 1번이 붙어있다는것.
자동으로 첫번째 이미지를 뒤에 붙이는 방법을 배운것같은데 까먹었다.

.windowcon{
overflow: hidden;
position: relative;
}

.container{
    width: 100%; height: 100%;
    position:absolute;
    left:0%;
}
.container img{
    display: block;
    position: absolute;
}

css는 특별할것 없다. 원래는 css에서 container에 직접 transition을 넣었었는데
마지막 슬라이드가 지나면 처음으로 돌아가는 모션이 보이는 문제가 있어서
이것도 스크립트로 넣어주기로했다.

const windowcon = document.querySelector('.windowcon'),
	  container = document.querySelector('.container'),
		slides = document.querySelectorAll('img'),
		slidecounter = slides.length;
let currentIndex = 0;

for(i=0; i < slidecounter; i++){
	slides[i].style.left = `${i*100}%`;

}

function calcul(){
	for(i=0; i<slidecounter; i++){
		if(windowcon.offsetHeight < slides[i].offsetHeight){
			windowcon.style.height = slides[i].offsetHeight + "px";
			windowcon.style.width = slides[i].offsetWidth + "px";
		}
	}
}

calcul();
var lele = 0;
var i = 0;
function moveleft(){
	if(i < slidecounter-1){
		lele += 100;
		i++;
		container.style.transition = '.3s'
	}else{
		container.style.transition = '0s'
		lele = 0;
		i = 0;
	}
	container.style.left = "-" + lele + "%";
}



function moveevent(){
	setInterval(moveleft, 1000)
}

moveevent();

 사실 위쪽에 calcul()함수는... 슬라이드의 높이가 다를때 부모에게 자식중 가장 큰놈의

높이값을 주는 함수였는데 혼자 뻘짓하다가 그냥 보여지는 창에 높이와 넓이를 주는 함수를

만들었다. 그냥 css에서 width, height 줘도 상관없는데 그냥 굳이 해봄.. (의미없음)

 

 lele 라는 변수는 container가 옆으로 이동할때 100퍼센트씩 움직이기때문에

100씩 더해줄 그릇을 만들어준것.

i는 슬라이드의 현재 위치를 알기위하여 만들었다.

 

moveleft() 함수는 조건문을 통해 i가 슬라이드의 총 갯수만큼 움직이는지를 검사해서

슬라이드 갯수보다 i가 작다면(true) i에 1씩 더하고 lele에 100씩 더하며, 콘테이너에 transition을 준다.

그렇지 않을(else)의 경우 lele 와 i를 0으로 돌리고 transition 을 0s로 바꾸는데 이는

마지막 슬라이드에서 첫번째 슬라이드로 이동하는 과정을 보여주지 않기 위해서였다.

 

setinterval 은 moveleft를 1초마다 반복하여 실행해준다.

 

문제 일단 무한슬라이드는 정상적으로(?) 잘 돌아가는데 마지막슬라이드에서 첫번째 슬라이드로 이동하는데 1초 또 두번째 슬라이드로 이동하는데 1초 , 총 2초가 소요되어 다른슬라이드보다 늦게 넘어가는 문제가.... 생긴다. 어쩌지 ㅎㅎ

 

 

const windowcon = document.querySelector('.windowcon'),
      container = document.querySelector('.container'),
        slides = document.querySelectorAll('img'),
        slidecounter = slides.length;
let currentIndex = 0;
 
for(i=0; i < slidecounter; i++){
    slides[i].style.left = `${i*100}%`;
 
}
 
function calcul(){
    for(i=0; i<slidecounter; i++){
        if(windowcon.offsetHeight < slides[i].offsetHeight){
            windowcon.style.height = slides[i].offsetHeight +"px";
            windowcon.style.width = slides[i].offsetWidth +"px";
        }
    }
}
 
calcul();
var lele = 0;
var i = 0;
 
function moveevent(){
    setInterval(function(){
        lele += 100;
        container.style.transition ='.3s'
        container.style.left ="-" + lele +"%";
        i++;
        
        if(i === slidecounter-1){
            setTimeout(function(){
                container.style.transition ='0s'
                lele = 0;
                container.style.left ="-" + lele +"%";
            },201)
            i = 0;
        }
    }, 1000)
}
 
moveevent();

 스크립트를 뜯어 고쳤다! moveevent부분을 싹 고치고 moveleft로 있었던걸 쪼개서 안에 넣어줬다.

1초마다 왼쪽으로 슬라이드가 작동하다가 맨끝 슬라이드에 도착하면 setTimeout가 실행된다.