画像をランダムに表示するスライドショー（JavaScript）

JavaScript

2023.05.29

JavaScriptでランダムに画像を表示するスライドショーを作ってみた。さらに、画像が切り替わるタイミングでふわっと画像が変化する効果もつけています。

html

<body>

</body>

const images=[“image/テスト1.jpg”,”image/テスト2.jpg”,”image/テスト3.jpg”,”image/テスト4.jpg”,”image/テスト5.jpg”];

let img_count=images.length;

let fst_img=Math.floor(Math.random()*img_count);

document.getElementById(“slide”).src=images[fst_img];

function slideshow(){

let num=Math.floor(Math.random()*img_count);

document.getElementById(“slide”).src=images[num];

};

setInterval(slideshow,5000);

CSSで画像がふわっと切り替わるような効果を出している。

@charset “utf-8”;

#slide{

animation: imgfade 5s infinite;

opacity: 0;

width: 100%;

height: 100%;

}

@keyframes imgfade{

0%{opacity: 0;}

20%{opacity: 1;}

50%{opacity: 1;}

80%{opacity: 1;}

100%{opacity: 0;}

}