2025年3月10日
FacebookとInstagramに「きまっし金沢」のお気に入り画像を掲載したついでに、その画像を利用してスライドショーを設置する事にしました。
１５０程度の360pcs×360pcsに加工した画像をランダムな順に表示するスライドショーです。
いろいろ調べたのですが、https://www.sejuku.net/blog/68469の方法が一番合っているような感じなので参考にしました。
表示したい位置に
<script>
const pics_src = [“12taki.jpg”,”abareA.jpg”,”abareB.jpg”];
let num = -1;
function slideshow_timer(){
num = Math.floor(Math.random()*pics_src.length);
document.getElementById(“mypic”).src = pics_src[num];
}
setInterval(slideshow_timer,3000);
</script>
<img id=”mypic” width=”360″ height=”360″>
を設置しました。
const pics_src = [“12taki.jpg”,”abareA.jpg”,”abareB.jpg”];にように画像のファイル名を入れます。
ここでは3個のファイル名だけ記入していますが、実際には150個のファイル名を入れました。
これが一番大変でした。
setInterval(slideshow_timer,3000);の数字は1つの画像を表示している時間です。
<img id=”mypic” width=”360″ height=”360″>の数字は画像の大きさです。
問題なく動作しました。
永久に動作し続けるのも具合悪いので画像が150枚表示した段階でストップするように改造しました。
<script>
const pics_src = [“12taki.jpg”,”abareA.jpg”,”abareB.jpg”];
let num = -1;
let i = 0;
function slideshow_timer() {
num = Math.floor(Math.random()*pics_src.length);
i += 1;
if (i > 150) {
setTimeout(“slideshow_timer()”,3000);}
else {document.getElementById(“mypic”).src = pics_src[num];}
}
setInterval(slideshow_timer,3000);
</script>
<img id=”mypic” width=”360″ height=”360″>
思い通りに動作しました。
最初の画像が出るまでに少し時間がかかるのが気になります。
2025年3月11日
困った時の、YAHOO！知恵袋ということで、相談しました。
さっそく教えてくれる人がいらして、解決しました。
<img id=”mypic” width=”360″ height=”360″>
を
<img id=”mypic” width=”360″ height=”360″ src=”top.jpg”>
と変更する事で、初期画面top.jpgを、すぐに表示できるようになりました。
