이 글의 내용은 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 = '';
}
oLi[count-1].className = "orange";
count++;
if (count>8){
count=1;
}
},1000)
</script>
</body>
</html>샘플 이미지:
위 내용은 js는 setInterval 타이머 메소드를 사용하여 캐러셀 차트를 구현하는 방법(전체 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
