0725 TIL

'use strict';
 
const gallery = document.querySelector('.gallery');
const galleryLi = gallery.querySelectorAll('ul>li');
const itemsLi = document.querySelectorAll('.items>ul>li');
 
const arrBg = [];
 
for (let i = 0; i < galleryLi.length; i++){
    arrBg.push('url(img/gallery'+i+'.jpg)no-repeat 50% /cover');
    galleryLi[i].style.background = arrBg[i];
}
 
let i = -1;
 
function autogallery() {
    i++;
 
    i = i % galleryLi.length;
    console.log(i);
 
    let geb = galleryLi[1].offsetLeft - galleryLi[0].offsetLeft;
 
    let goto = (-gab * i) + 'px';
 
    gallery.style.left = goto;
    gallery.style.transition = 'all .3s';
 
    itemsLi.forEach(function (val,idx){
        if(idx == i){
            val.classList.add('on');
        }else {
            val.classList.remove('on');
        }
    });
}
 
let setIn = setInterval(autogallery,3000);
 
const overOut = document.querySelectorAll('.overout');
 
overOut.forEach(function (val){
    val.addEventListener('mouseover', function (){
        clearInterval(setIn);
    });
    val.addEventListener('mouseout',function (){
        setIn = setInterval(autogallery,3000);
    });
});
 
 
(function (){
    autogallery();
})();

코드해석:

const gallery = document.querySelector('.gallery'); 로
class gallery 를 선택해준다.

const galleryLi = gallery.querySelectorAll('ul>li');
const itemsLi = document.querySelectorAll('.items>ul>li');
도 마찬가지로 각자 선택해준다.

arrBg는 배열의 이름이고, for문을 이용해서 반복문을 만드는데 let을 이용해서 선언을 만들고 i라는 그릇에 0이 들어가고, i는 gallery.length 보다 작다. 그리고 i++때문에 i는 1씩 gallery.length 만큼 늘어난다. (0,1,2,3,4) arrBg.push는 const arrBg = []; 안에 들어가게 하는거고 다음으로 오는 이미지는 +i+로 0~4까지의 .jpg의 이미지가 galleryLi i번째 background 설정에 arrBg에 들어있는 i번째 url을 넣어주는 것. 위에서부터 아래로 차례대로 내려오면서 쌓인게 마지막으로 쓰인 것