setIntervalメソッドを使用することで一定間隔で処理を実行させることができます。(Sample)
setIntervalメソッドの第一引数は定期的に実行したい処理、第二引数は実行間隔をミリ秒単位で設定します。
このサンプルでは、定期的に実行したい処理をアロー関数で指定しています。
アロー関数の中身はLorem Picsumの画像のidを1ずつ増やしながら取得するというものです。
実行間隔は2000ミリ秒、つまり、2秒毎に処理しています。
<!DOCTYPE html>
<html>
<head>
<title>setInterval.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<p><img src="https://picsum.photos/id/1/200/300" id="image"></p>
</div>
<script>
let cnt = 1;
setInterval(() => {
document.querySelector("#image").src = "https://picsum.photos/id/" + cnt + "/200/300";
cnt++;
}, 2000);
</script>
</body>
</html>