집 >웹 프론트엔드 >JS 튜토리얼 >js는 setInterval 타이머 메소드를 사용하여 캐러셀 차트를 구현하는 방법(전체 코드)

js는 setInterval 타이머 메소드를 사용하여 캐러셀 차트를 구현하는 방법(전체 코드)

不言원래의: 2018-08-13 16:08:368112검색

이 글의 내용은 js가 캐러셀 이미지(전체 코드)를 구현하기 위해 어떻게 setInterval 타이머 메소드를 사용하는지에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

저번에 면접보러 갔을 때 면접관이 캐러셀을 손으로 써달라고 하더군요. 막 나온거라 js가 별로 좋지 않아서 그냥 못 쓴다고 했는데요. 높은 급여를 원하지만 여전히 js를 알아야 합니다. 일반적으로 배우기만 하면 됩니다. 이제 setInterval 타이머 메서드를 사용하여 기본 캐러셀 차트를 개발합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #main{width:490px;margin:100px auto;}
        #main img{width:100%;height:300px}
        #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;
            padding:6px;
        }
        .orange{background-color: orange}
    </style>
</head>
<body>
<p id="main">
    <img src="img/1.jpg">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</p>
<script type="text/javascript">
    var op = document.getElementsByTagName("img")[0];
    var oLi = document.getElementsByTagName("li");
    var count =1;
    var timer = setInterval(function () {
        op.src = "img/"+count+".jpg";
        for ( var i=0;i<oLi.length;i++ ){
            oLi[i].className = &#39;&#39;;
        }
        oLi[count-1].className = "orange";
        count++;
        if (count>8){
            count=1;
        }
    },1000)
</script>
</body>
</html>

샘플 이미지:

js는 setInterval 타이머 메소드를 사용하여 캐러셀 차트를 구현하는 방법(전체 코드)

관련 기사