以下サンプルHTML＋CSS+JS
slideshow.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像スライドショー</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: black;
}
.slideshow {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow img {
width: 100%;
height: 100%;
object-fit: contain;
}
.slideshow img:first-of-type {
display: block;
}
.slideshow img:not(:first-of-type) {
display: none;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="https://pbs.twimg.com/media/GF8-s-BbMAAsg0w?format=jpg&name=large">
<img src="https://pbs.twimg.com/media/GF76rxVa4AAJz-q?format=jpg&name=large">
<img src="https://pbs.twimg.com/media/GEvIzyTagAArYAU?format=jpg&name=large">
</div>
<script>
const images = document.querySelectorAll('.slideshow img');
let currentImage = 0;
// 10秒間隔で画像を切り替える
let intervalMS = 10000;
setInterval(() => {
// すべての画像を非表示にする
images.forEach(image => image.style.display = 'none');
// 次の画像のインデックスを取得
currentImage = (currentImage + 1) % images.length;
// 次の画像を表示
images[currentImage].style.display = 'block';
// 次の画像のアニメーションを開始(速いフェード・イン／アウト)
images[currentImage].animate(
{
opacity: [0, 1, 1, 0],
offset: [0, 0.05, 0.95, 1],
easing: "ease-out",
},
intervalMS,);
}, intervalMS);
</script>
</body>
</html>
解説
テストしやすいようにペラ１で
コピペしてファイルに保存するだけで動作するので試してみてください。
長辺に合わせて最大化する際にはobject-fit: contain;で
object-fit: contain;で画像の長辺に合わせて最大化してくれます。余白は出ます。余白を出さないように短辺に合わせ絵拡大縮小したい時にはobject-fit: cover; で実現できます。
keyframes をJSで実現するためanimateメソッドを使った
◯秒おきに切り替えという操作をJSで設定したかったため、CSSにkeyframesを設定するのではなく、JSでanimateを呼び出しています。機能としてはほぼ同等ですが、CSSでアニメーションを制御するかJSで制御するかはどっちかに寄せた方が修正が一箇所ですみます。
フェード・イン／アウトのアニメーションはなくてもいいのですが、一瞬で切り替わると変わったということが分からないので、少しだけアニメーションさせています。
拡張例
- IMGタグを複数出しているところをPHPなどで埋め込んでもよし
- JSでimg要素をappendして実行してもよし
画像とintervalMSの数字だけを変えればあちこちで使えます。
なぜ作りたかったか
スマホでスライドショーのアプリを探していたのですが、「大量の風景画像があります」とかで自分で選べるものがなかったり、切り替えエフェクトが凝りまくっていてそこはそんなに頑張るところじゃぁないというものばかりだったので、仕方なく自作しました。
用途
- あまりスマホをフォトフレーム代わりに推し画像を表示させておく
- Tableauなどで作られたグラフのスクショを連続再生させる「手ぶらBIツール」をつくってオフィスに常に表示
- 店舗などの画面に映すデジタルサイネージ