JavaScriptでランダムに画像を表示するスライドショーを作ってみた。さらに、画像が切り替わるタイミングでふわっと画像が変化する効果もつけています。
html
<body>
<img id=”slide” src=””>
<script src=”03_slideshow.js”></script>
</body>
JavaScript
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
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;}
}
コメント