この記事の内容は、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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
