HTML / CSS / Java script - (2021.03.29) 이미지 슬라이드

test.css

0.00MB

test.html

0.00MB

test.js

0.00MB

@keyframes 을 추가로 만들기 싫어서 이미 만들어 놓은 거에 animation-direction: reverse; 썼다가 헤멨다.

그냥 @keyframes 추가해주자. 

 

javascript는 이상이 없는데 여기서 문제를 찾으려다가 시간을 많이 썼다. 

개발자 도구 콘솔창에 문제가 없다면 요소창에 가서 css를 살펴서 문제를 발견할 수도 있다. 

그냥 @keyframes 추가해주자.  

 

그런데 여기서 

var sIndex=0;
autoslide=setInterval(slider,2000);
function slider(){ 
    li=document.querySelectorAll('.box> li');
    onNum = sIndex+1;
    if(onNum==li.length){ onNum=0;}
    for(i=0; i<li.length; i++){    
        if(i==sIndex){ 
            li.item(i).setAttribute('class','rOut'); 
        }
        else if(i==onNum){ 
            li.item(i).setAttribute('class','rIn'); 
        }
        else{
            li.item(i).setAttribute('class',''); 
        }
    }
    sIndex++;
    if(sIndex==li.length) sIndex=0; 
}
function nextslide(){
    li=document.querySelectorAll('.box> li');
    clearInterval(autoslide);
    onNum = sIndex+1; 
    if(onNum==li.length){ onNum=0;}
    for(i=0; i<li.length; i++){
        if(i==sIndex){ 
            li.item(i).setAttribute('class','rOut');
            console.log(i+"나가고"); 
        }
        else if(i==onNum){ 
            li.item(i).setAttribute('class','rIn'); 
            console.log(i+"들어오고"); 
        }
        else{
            li.item(i).setAttribute('class',''); 
        }
    }
    sIndex++; 
    if(sIndex==li.length) sIndex=0;
}
function prevslide(){
    clearInterval(autoslide);
    onNum=sIndex-1; 
    if(onNum<0){ onNum=li.length-1;}
    for(i=0; i<li.length; i++){
        if(i==sIndex){
            li.item(i).setAttribute('class','lOut');  
        }
        else if(i==onNum){ 
            li.item(i).setAttribute('class','lIn');
        }
        else{
            li.item(i).setAttribute('class','');
        }
    }
    sIndex--; 
    if(sIndex<0) sIndex=li.length-1; 
}

nextslide 함수랑 slider 함수랑 내용이 같기 때문에 합칠 수 있다. 이왕 합칠 꺼 prevslide 함수도 그냥 합친다. 

 

test1.js

0.00MB

var sIndex=0;
autoslide=setInterval(slider,2000);
function slider(type){ 
    li=document.querySelectorAll('.box> li');
    if(type===true){// 이전버튼 누를 때 . 
        onNum=sIndex-1; 
        if(onNum<0){ onNum=li.length-1;}  
        for(i=0; i<li.length; i++){
            if(i==sIndex){
                li.item(i).setAttribute('class','lOut'); 
                console.log(i+"나가고"); 
            }
            else if(i==onNum){ 
                li.item(i).setAttribute('class','lIn');
                console.log(i+"들어오고"); 
            }
            else{
                li.item(i).setAttribute('class','');
            }
        }
        sIndex--; 
        if(sIndex<0) {sIndex=li.length-1;} 
    }
    else{ // 다음버튼 누를 때 &  오토슬라이트일 때.
        onNum = sIndex+1;
        if(onNum==li.length){ onNum=0;}
        for(i=0; i<li.length; i++){    
            if(i==sIndex){ 
                li.item(i).setAttribute('class','rOut'); 
            }
            else if(i==onNum){ 
                li.item(i).setAttribute('class','rIn'); 
            }
            else{
                li.item(i).setAttribute('class',''); 
            }
                 }
        sIndex++;
        if(sIndex==li.length) sIndex=0; 
        }
}
function slideBtn(type){  //버튼을 누르면 오토슬라이드가 꺼지고 slider함수 1번 실행
    clearInterval(autoslide);
    slider(type);
}

 

 

 

이렇게 합치니까 함수는 3개에서 2개로 줄었고, 59line 에서 45line으로 코드도 많이 줄였다. 

 

기능이 같은 함수는 가능한 합치는 게 좋은 것 같다.

 

함수에 주는 매개변수를 달리하여 각 상황에 맞게 사용할 수도 있다.  

 

 

flag 변수를 사용하여 함수의 흐름을 제어할 수도 있다.  그때 그떄 제어해줄 수도 있지만.  코드 길이가 길어지면 그게 힘들 수가 있다.