JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのsetTimeout()でフェードさせながら画像の切り替え

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

setTimeout()

JavaScriptのsetTimeout()でフェードさせながら画像の切り替え

JavaScriptのsetTimeout()でフェードさせながら画像の切り替え

JavaScriptの setTimeout() メソッドを使って、複数の画像をフェードイン・フェードアウトさせながら切り替えるスニペットを作ってみました。

かかかず
かかかず

スライドショーっぽい挙動のスニペットです。

setTimeout()

JavaScriptの setTimeout() は、一定時間経過した後に処理を一回だけ実行する際に使用するメソッドで、実行タイミングはミリ秒(1秒=1000)で指定します。

setTimeout(処理内容,実行タイミング)

この記事では、このメソッドを使って複数の画像をフェードイン・フェードアウトさせながら切り替える方法について解説しています。

フェードさせながら画像の切り替えのサンプル

早速サンプルです。設置した画像が4秒毎にフェードアウト・フェードインしながら切り替わります。

画像の切り替え
かかかず
かかかず

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の記述がないと、フェードせずに切り替わります。