概要
とってもニッチな議題なのであまりニーズはなさそうですが、備忘録もかねてかきます。
完成イメージはこんな感じです。
コードは以下です。
html
<body>
<div id="randomImg"></div>
</body>
css
#randomImg {
width: 100vw;
height: 100vh;
background-image: url(/image01.jpg); //背景画像の初期値
background-position: center center;
background-size: cover;
}
javascript
var images = [ 'url(/image01.jpg)', 'url(/image02.jpg)', 'url(/image03.jpg)' ]; // ランダム表示させたい画像のパス
$(function(){
var backgroundRandom = function(){
var number = Math.floor(Math.random() * images.length); // 0~3の数値を算出
var selectedImg = images[number]; // 算出された数値を元に、1行目の配列から取り出す
$('#randomImg').css('background-image',selectedImg); // cssにランダムに選ばれた画像を背景設定する
};
setInterval(backgroundRandom, 1000); // 1000msごとにランダム切り替えを繰り返す
});
使用シーン
スライドショーではないもので、キービジュアル部分を切り替えたいなーというときに使えるかもしれません。
setIntervalの数値をいじればゆっくり表示することもできますし、
cssでゆっくり拡大したりとアニメーションをつけても面白いと思います。
注意点
- ランダムなので、同じ画像が続くこともあります。
- 画像ファイルが重いと、読み込みに時間がかかります。画像点数はファイル数と相談して適度に保ちましょう。
つまづいた点
途中、setIntervalが1度しか動かず、解決に数時間費やしてしまいました。
原因はスコープの範囲を間違っていたという初歩的なことでしたが、その過程で見つけた記事も参考になりそうなのでこちらに紹介しておきます。
https://qiita.com/AK092/items/a8cdde07b55df355ed08
https://taccuma.com/timer-javascript/
以上です。
改善点や間違っている点がありましたら是非ご指摘おねがいします！