スライドショー（一定時間で切り替わる）

JavaScript

スライドショーの若干応用的なやりかた。

画像をクリックするのではなく、 一定時間が過ぎると勝手に次の画像に切り替わる。

setTimeoutで一定の時間経過後（この例では５秒きざみ）で勝手に切り替わる

[sample02.html]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample02</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./sample02.js"></script>
  <link rel="stylesheet" href="./css/sample02.css" type="text/css" media="all">
</head>
<body>
  <div id="main">
    <img id="sample-img" src="images/001.jpg">
  </div>
</body>
</html>

[sample02.css]

#main {
  width: 580px;
  height: auto;
}

#sample-img {
  width: 100%;
  height: auto;
}

[sample02.js]

'use strict';

let path = "./images";
const image_src = new Array(`${path}/001.jpg`,`${path}/002.jpg`,`${path}/003.jpg`,`${path}/004.jpg`,`${path}/005.jpg`);
let num = 0;

function slideAtTime(){
    if (num == 4) {
        num = 0;
    }
    else {
        num ++;
    }
    $("#sample-img").attr("src", image_src[num]);
    setTimeout("slideAtTime()", 5000)
}

slideAtTime();

(DEMO) sample02

世界遺産の画像が5秒間隔で順に切り替わる。