JavaScriptの setTimeout() メソッドを使って、複数の画像をフェードイン・フェードアウトさせながら切り替えるスニペットを作ってみました。
かかかず
スライドショーっぽい挙動のスニペットです。
setTimeout()
JavaScriptの setTimeout() は、一定時間経過した後に処理を一回だけ実行する際に使用するメソッドで、実行タイミングはミリ秒（1秒=1000）で指定します。
setTimeout(処理内容,実行タイミング)この記事では、このメソッドを使って複数の画像をフェードイン・フェードアウトさせながら切り替える方法について解説しています。
フェードさせながら画像の切り替えのサンプル
早速サンプルです。設置した画像が4秒毎にフェードアウト・フェードインしながら切り替わります。
かかかず
４秒毎にふわっとしながら画像を切り替える形です。
フェードさせながら画像の切り替えのコード
HTMLはこれだけの記述でOKです。
<img id="changePic" src="https://dubdesign.net/wp-content/uploads/2022/01/pagereload.jpg" alt="画像の切り替え">そして切り替える画像は、constの宣言の中にそれぞれのパスを指定して記述します。
const img = ["https://dubdesign.net/wp-content/uploads/2022/01/pagereload.jpg", "https://dubdesign.net/wp-content/uploads/2022/01/javaprogless.jpg", "https://dubdesign.net/wp-content/uploads/2021/12/cookiewrite.jpg"];
let count = -1;
picChange();
function picChange() {
count++;
if (count == img.length) count = 0;
//画像選択
changePic.src = img[count];
//秒数の指定
setTimeout("picChange()", 4000);
}写真を切り替える部分のJavaScriptのコードは、setTimeout("picChange()", 4000); と「4秒」で切り替えるように設定をしています。
この切り替えタイミングに、CSSのアニメーションのタイミングを合わせることでフェードイン・フェードアウトさせています。
CSS
フェードイン・フェードアウトさせるアニメーションは、主にCSSで記述しています。特にJavaScriptで設定したsetTimeout の秒数と、animation の秒数を一致させ、infinite も一緒に記述して無限にアニメーションがかかるようにしています。
#changePic {
animation :imgfade 4s infinite;
opacity: 0;
}
@keyframes imgfade {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}かかかず
上記のCSSの記述がないと、フェードせずに切り替わります。
