dukDukz

2021.03.30 버튼으로 슬라이드 제어 오류_해결 + 슬라이드 정지/재생 본문

웹 개발/JAVASCRIPT

2021.03.30 버튼으로 슬라이드 제어 오류_해결 + 슬라이드 정지/재생

헤일리_HJ 2021. 3. 30. 09:01

오류

더보기

html, css, js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!--
        wrap
    -->
    <div id="wrap">
        <div id="header_wrap">  <!--width 100%-->
            <!--wrap 안에 wrap-->
            <div id="header"><!--width: 1200px; , margin: 0 auto; 줄 부분-->
                <!--logo and gnb-->
            </div>

            <div id="snb_wrap"> <!--width 100%-->
                <div id="snb">  <!--width 1200px-->
                    <!--snb content-->
                </div>
            </div>
        </div>
        <div id="visual_wrap">  <!--width 100%-->
            <div id="visual">   <!--width 1920px-->

            </div>
        </div>

        <div id="contents"> <!--width 1200px-->
            <div id="interview">    <!--width 600px-->
                <h2>취업자인터뷰</h2>
                <ul class="interview_content">
                    <li class=""> <!--하나당 넓이가 238px-->
                        <img src="./img/interview.png">
                        <p>글자 내용 1</p>
                    </li>
                    <li class="">
                        <img src="./img/interview2.png">
                        <p>글자 내용 2</p>
                    </li>
                    <li class="">
                        <img src="./img/interview3.png">
                        <p>글자 내용 3</p>
                    </li>
                    <li class=" ">
                        <img src="./img/interview4.png">
                        <p>글자 내용 4</p>
                    </li>
                    <a href="#" class="prev" onclick="interviewBtn(0)"> &lt </a>
                    <a href="#" class="next" onclick="interviewBtn(1)"> &gt </a>
                </ul>
                
            </div>
        </div>
    </div>


    <script type="text/javascript" src="./index.js"></script>

</body>
</html>

 

 

index.css

*{
    margin: 0; padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    display: block;
    line-height: 0;
}

#warp{
    width: 100%;
}

#header_wrap{
    width: 100%;
    
    background: red;
}

#header{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: blue;
}

#snb_wrap{
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 3;
}

#snb{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    background: tomato;
}

#visual_wrap{
    width: 100%;
    height: 500px;
    background: green;
    
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto; /*absolute 때문에 안먹음 but relative는 먹음*/
    background: silver;
    position: relative;
    z-index: 1;
}

#contents{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    /*background: pink;*/
}

.interview_content{
    width: 238px;
    position: relative;
    height: 500px;
   overflow: hidden;
}

.interview_content > li{
    position: absolute;
    display: none;
}

.interview_content>li>img{
    width: 238px;
    height: 158px;
}

.interview_content > li.on{
    display: block;
    animation: slider1 1s;
    animation-fill-mode: forwards;
}

.interview_content > li.out{
    display: block;
    animation: slider2 1s;
    animation-fill-mode: forwards;
    /*animation-fill-mode: forwards; 한번 실행하고 멈춘다? --> 찾아보기*/
}

.interview_content>li.out2{
    display: block;
    animation: slider3 1s;
    animation-fill-mode: forwards;
}

.interview_content>li.on2{
    display: block;
    animation: slider4 1s;
    animation-fill-mode: forwards;
}


/*그림을 두개씩 컨트롤 한다고 생각!*/

@keyframes slider1{
    from{
        left: 238px;
    }
    to{
        left: 0px;
    }
}

@keyframes slider2{
    from{
        left: 0px;
    }
    to{
        left: -238px;
    }
}

/*out2 - 보이는애*/
@keyframes slider3{
    from{
        left: 0px;
    }
    to{
        left : 238px;
    }
}

/*on2 - 앞으로 보여질 애*/
@keyframes slider4{
    from{
        left: -238px;
    }
    to{
        left: 0px;
    }
}


/*슬라이드 버튼*/
.prev{
    position: absolute;
    left: 0px;
    top: 200px;
    width: 20px;
    height: 30px;
    background: red;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    
}

.next{
    position: absolute;
    top: 200px;
    width: 20px;
    height: 30px;
    background: blue;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    left: 218px;
    
}

.prev:hover , .next:hover{
    background: rgb(128, 128, 128);
    text-decoration: none;
}

 

 

index.js

 

var index = 0;
var rolling = null;

function slider(n){
    li = document.querySelectorAll('.interview_content > li');
    intBtn = document.querySelectorAll('.interview_content > a');
    // index ++ 전에 적어준다
    /*if (flag == undefined){
        flag = true;
    }
    */
    if(index == li.length){     // if ('code') 비교 연산자 [true false]
        index = 0;
    }

    for(i=0; i < li.length; i++){
        var onNum = index+1;        //index+1 이 4를 넘어가면 0으로 초기화 한다.
        var downNum = index-1;
        if(onNum== 4){
            onNum = 0;
        }

        if(downNum == -1){
            downNum = 0;
        }

        if(n==0){
            if(i == index){
                li.item(i).setAttribute('class','out2');
            }else if(i == downNum){
                li.item(i).setAttribute('class', 'on2');
            }else{
                li.item(i).setAttribute('class', ' ');
            }
        }else{
            if(i == index){
                li.item(i).setAttribute('class','out');
            }else if(i == onNum){
                li.item(i).setAttribute('class', 'on');
            }else{
                li.item(i).setAttribute('class', ' ');
            }
        }
        console.log(index);
        
    }

    index ++;
    
}


function interviewBtn(n){
    clearInterval(rolling);
    slider(n);
    rolling = setInterval(slider,5000);
}

rolling = setInterval(slider,5000);

/*
setInterval을 먼저 만들고

함수를 만든다
전역변수 선언하고
index ++ 되는걸 console로 찍어보고
조건문을 걸어서 index값이 4일때 0으로 초기화 해준다
*/

 

앞으로 가는 버튼, 자동 슬라이드는 정상 작동 되는데

index ++; 이것때문에 오류가 나서 

뒤로 가는 버튼을 누를때마다 오류 값이 나옴

 

 

 

 

오류해결

html css js

더보기

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!--
        wrap
    -->
    <div id="wrap">
        <div id="header_wrap">  <!--width 100%-->
            <!--wrap 안에 wrap-->
            <div id="header"><!--width: 1200px; , margin: 0 auto; 줄 부분-->
                <!--logo and gnb-->
            </div>

            <div id="snb_wrap"> <!--width 100%-->
                <div id="snb">  <!--width 1200px-->
                    <!--snb content-->
                </div>
            </div>
        </div>
        <div id="visual_wrap">  <!--width 100%-->
            <div id="visual">   <!--width 1920px-->

            </div>
        </div>

        <div id="contents"> <!--width 1200px-->
            <div id="interview">    <!--width 600px-->
                <h2>취업자인터뷰</h2>
                <ul class="interview_content">
                    <li class=""> <!--하나당 넓이가 238px-->
                        <img src="./img/interview.png">
                        <p>글자 내용 1</p>
                    </li>
                    <li class="">
                        <img src="./img/interview2.png">
                        <p>글자 내용 2</p>
                    </li>
                    <li class="">
                        <img src="./img/interview3.png">
                        <p>글자 내용 3</p>
                    </li>
                    <li class=" ">
                        <img src="./img/interview4.png">
                        <p>글자 내용 4</p>
                    </li>
                    <button class="prev" onclick="interviewBtn(0)"> &lt </button>
                    <button class="next" onclick="interviewBtn(1)"> &gt </button>
                </ul>
                
            </div>
        </div>
    </div>


    <script type="text/javascript" src="./index.js"></script>

</body>
</html>

 

.css

*{
    margin: 0; padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    display: block;
    line-height: 0;
}

#warp{
    width: 100%;
}

#header_wrap{
    width: 100%;
    
    background: red;
}

#header{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: blue;
}

#snb_wrap{
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 3;
}

#snb{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    background: tomato;
}

#visual_wrap{
    width: 100%;
    height: 500px;
    background: green;
    
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto; /*absolute 때문에 안먹음 but relative는 먹음*/
    background: silver;
    position: relative;
    z-index: 1;
}

#contents{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    /*background: pink;*/
}

.interview_content{
    width: 238px;
    position: relative;
    height: 500px;
   /* overflow: hidden;*/
}

.interview_content > li{
    position: absolute;
    display: none;
}

.interview_content>li>img{
    width: 238px;
    height: 158px;
}

.interview_content > li.on{
    display: block;
    animation: slider1 1s;
    animation-fill-mode: forwards;
}

.interview_content > li.out{
    display: block;
    animation: slider2 1s;
    animation-fill-mode: forwards;
    /*animation-fill-mode: forwards; 한번 실행하고 멈춘다? --> 찾아보기*/
}

.interview_content>li.out2{
    display: block;
    animation: slider3 1s;
    animation-fill-mode: forwards;
}

.interview_content>li.on2{
    display: block;
    animation: slider4 1s;
    animation-fill-mode: forwards;
}


/*그림을 두개씩 컨트롤 한다고 생각!*/

@keyframes slider1{
    from{
        left: 238px;
    }
    to{
        left: 0px;
    }
}

@keyframes slider2{
    from{
        left: 0px;
    }
    to{
        left: -238px;
    }
}

/*out2*/
@keyframes slider3{
    from{
        left: 0px;
    }
    to{
        left : 238px;
    }
}

/*on2*/
@keyframes slider4{
    from{
        left: -238px;
    }
    to{
        left: 0px;
    }
}


/*슬라이드 버튼*/
.prev{
    position: absolute;
    left: 0px;
    top: 200px;
    width: 20px;
    height: 30px;
    background: red;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    
}

.next{
    position: absolute;
    top: 200px;
    width: 20px;
    height: 30px;
    background: blue;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    left: 218px;
    
}

.prev:hover , .next:hover{
    background: rgb(128, 128, 128);
    text-decoration: none;
}

 

 

.js

 

var index = 0;
var rolling = null;
slider();

function slider(type,currentIndex,newIndex){
    flag = true;
    li = document.querySelectorAll('.interview_content > li');
    intBtn = document.querySelectorAll('.interview_content > a')

    if(index == li.length){     // if ('code') 비교 연산자 [true false]
        index = 0;
    }

    if (type != undefined){     //인자값이 있는 상태(버튼을 눌러서)로 들어오면 flag 가 false다
        flag = false;
    }

    for(i=0; i < li.length; i++){
        var onNum = index+1;        //index+1 이 4를 넘어가면 0으로 초기화 한다.
        if(onNum == 4){
            onNum = 0;
        }

        if (type == 0 ) {       // 이전버튼 클릭
            if (i == currentIndex) {
                li.item(i).setAttribute('class', 'out2');
            } else if (i == newIndex) {
                li.item(i).setAttribute('class', 'on2');
            } else {
                li.item(i).setAttribute('class', '');
            }
        } else {            // 다음버튼 클릭
            if(i == index){
                li.item(i).setAttribute('class','out');
            }else if(i == onNum){
                li.item(i).setAttribute('class', 'on');
            }else{
                li.item(i).setAttribute('class', ' ');
            }
        }
    }
    

    //매개변수(버튼이 눌리면)가 들어오면 flag = false 값이 된다.
    if(flag){
        index ++;
    } else {
        index = newIndex;
    }
       
}

function interviewBtn(type){
    console.log(index);
    var newIndex;
    if (type == 0) {    // 이전 버튼 -1일때 3으로 초기화
        newIndex = index - 1;
        if (newIndex == -1) { newIndex = 3; }
        console.log('이전 인덱스값' + newIndex,'현재인덱스값 '+index);
    } else if (type == 1) {     // 다음 버튼 4일때 0으로 초기화
        newIndex = index + 1;
        if (newIndex == 4) { newIndex= 0; }
        console.log('다음 인덱스값' + newIndex,'현재인덱스값 '+index);
    }

    clearInterval(rolling);
    //index : 1 가정하고 이전버튼 눌렀다고 가정합시다. 0 1 0
    slider(type,index,newIndex);        // index의 결과값(숫자만) 만 보내준다 currentIndex로 
    rolling = setInterval(slider,5000);    
}

rolling = setInterval(slider,5000);

 

 

슬라이드 버튼으로 정지 재생

stop go

더보기

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index_practice.css">
</head>
<body>
    <!--
        wrap
    -->
    <div id="wrap">
        <div id="header_wrap">  <!--width 100%-->
            <!--wrap 안에 wrap-->
            <div id="header"><!--width: 1200px; , margin: 0 auto; 줄 부분-->
                <!--logo and gnb-->
            </div>

            <div id="snb_wrap"> <!--width 100%-->
                <div id="snb">  <!--width 1200px-->
                    <!--snb content-->
                </div>
            </div>
        </div>
        <div id="visual_wrap">  <!--width 100%-->
            <div id="visual">   <!--width 1920px-->

            </div>
        </div>

        <div id="contents"> <!--width 1200px-->
            <div id="interview">    <!--width 600px-->
                <h2>취업자인터뷰</h2>
                <ul class="interview_content">
                    <li class=""> <!--하나당 넓이가 238px-->
                        <img src="./img/interview.png">
                        <p>글자 내용 1</p>
                    </li>
                    <li class="">
                        <img src="./img/interview2.png">
                        <p>글자 내용 2</p>
                    </li>
                    <li class="">
                        <img src="./img/interview3.png">
                        <p>글자 내용 3</p>
                    </li>
                    <li class=" ">
                        <img src="./img/interview4.png">
                        <p>글자 내용 4</p>
                    </li>
                    <button class="prev" onclick="interviewBtn(0);"> &lt </button>
                    <button class="next" onclick="interviewBtn(1);"> &gt </button>
                    <button class="stop" onclick="stopBtn();"> stop </button>
                    <button class="go" onclick="goBtn();"> go </button>
                </ul>
                
            </div>
        </div>
    </div>


    <script type="text/javascript" src="./index_practice.js"></script>

</body>
</html>

 

 

css

 

*{
    margin: 0; padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    display: block;
    line-height: 0;
}

#warp{
    width: 100%;
}

#header_wrap{
    width: 100%;
    
    background: red;
}

#header{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: blue;
}

#snb_wrap{
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 3;
}

#snb{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    background: tomato;
}

#visual_wrap{
    width: 100%;
    height: 500px;
    background: green;
    
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto; /*absolute 때문에 안먹음 but relative는 먹음*/
    background: silver;
    position: relative;
    z-index: 1;
}

#contents{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    /*background: pink;*/
}

.interview_content{
    width: 238px;
    position: relative;
    height: 500px;
    overflow: hidden;
}

.interview_content > li{
    position: absolute;
    display: none;
}

.interview_content>li>img{
    width: 238px;
    height: 158px;
}

.interview_content > li.on{
    display: block;
    animation: slider1 1s;
    animation-fill-mode: forwards;
}

.interview_content > li.out{
    display: block;
    animation: slider2 1s;
    animation-fill-mode: forwards;
    /*animation-fill-mode: forwards; 한번 실행하고 멈춘다? --> 찾아보기*/
}

.interview_content>li.out2{
    display: block;
    animation: slider3 1s;
    animation-fill-mode: forwards;
}

.interview_content>li.on2{
    display: block;
    animation: slider4 1s;
    animation-fill-mode: forwards;
}


/*그림을 두개씩 컨트롤 한다고 생각!*/

@keyframes slider1{
    from{
        left: 238px;
    }
    to{
        left: 0px;
    }
}

@keyframes slider2{
    from{
        left: 0px;
    }
    to{
        left: -238px;
    }
}

/*out2*/
@keyframes slider3{
    from{
        left: 0px;
    }
    to{
        left : 238px;
    }
}

/*on2*/
@keyframes slider4{
    from{
        left: -238px;
    }
    to{
        left: 0px;
    }
}



/*슬라이드 버튼*/
.prev{
    position: absolute;
    left: 0px;
    top: 200px;
    width: 20px;
    height: 30px;
    background: red;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    
}

.next{
    position: absolute;
    top: 200px;
    width: 20px;
    height: 30px;
    background: blue;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    left: 218px;
    
}

.stop{
    position: absolute;
    top: 200px;
    width: 50px;
    height: 30px;
    background: yellow;
    line-height: 30px;
    color: black;
    outline: 0;
    text-align: center;
    left: 100px;
}

.go{
    position: absolute;
    top: 200px;
    width: 30px;
    height: 30px;
    background: rgb(23, 196, 153);
    line-height: 30px;
    color: black;
    outline: 0;
    text-align: center;
    left: 60px;
}

.prev:hover , .next:hover{
    background: rgb(128, 128, 128);
    text-decoration: none;
}

 

 

js

var index = 0;
var rolling = null;
Moving();

function Moving(n, currentIndex, beNum) {
    flag = true;
    li = document.querySelectorAll('.interview_content>li');

    if (index >= li.length) {
        index = 0;
    }

    if (n != undefined) {
        flag = false;
    }

    for (i = 0; i < li.length; i++) {
        var onNum = index + 1;
        if (onNum == 4) {
            onNum = 0;
        }
        if (n == 0) {
            if (i == currentIndex) {
                li.item(i).setAttribute('class', 'out2');
            } else if (i == beNum) {
                li.item(i).setAttribute('class', 'on2');
            } else {
                li.item(i).setAttribute('class', ' ');
            }
        } else{
            if (i == index) {
                li.item(i).setAttribute('class', 'out');
            } else if (i == onNum) {
                li.item(i).setAttribute('class', 'on');
            } else {
                li.item(i).setAttribute('class', ' ');
            }
        }
    }
    if (flag) {
        index++;
    } else {
        index = beNum;
    }
}

function interviewBtn(n) {
    var beNum;
    if (n == 0) {
        beNum = index - 1;
        if (beNum == -1) {
            beNum = 3;
        }
    } else if (n == 1) {
        beNum = index + 1;
        if (beNum == 4) {
            beNum = 0;
        }
    }

    clearInterval(rolling);

    Moving(n, index, beNum);
    rolling = setInterval(Moving, 2000);

}

rolling = setInterval(Moving, 2000);


function stopBtn(){
    clearInterval(rolling);
}

function goBtn(){
    clearInterval(rolling);
    Moving();  
    rolling = setInterval(goBtn, 2000);
}

 

슬라이드 go stop 

'웹 개발 > JAVASCRIPT' 카테고리의 다른 글

2021.03.31 Javascript 기본기 2_ let과 const 형변환  (2) 2021.03.31
2021.03.30 Javascript 기본 문법  (0) 2021.03.30
2021.03.25 경일 배너 만들기 (애니메이션)  (0) 2021.03.25
2021.03.25 JS Document. 의 활용  (0) 2021.03.25
2021.03.24 JS에 대해  (0) 2021.03.24
'웹 개발/JAVASCRIPT' Related Articles more