ホームページの作成や運用ノウハウについて、プロのクリエイターが情報を無料公開!

ホームページTIPS
facebook twitter mail

このサイトに掲載されているコードの転用は一切制限しておりませんが、表示や挙動保証は対象外となります。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

更新日:2019.9.5

jQueryを使い複数の画像をクロスフェードで切り替える

Attention!

複数の画像をクロスフェードで切り替え表示する方法をご紹介します。スライダー系のライブラリを読み込んで設定するよりも簡単に、jQueryを使って設定する方法です。 当サイトのトップページ「WORKS」にもこの方法でクロスフェード画像を配置しています。

1htmlマークアップは以下の通り

フェードで切り替え表示したい画像のimgタグをjQueryで指定する要素の中に記述します。
画像を追加したい場合は、imgタグを追加していきます。

2CSSは以下の通りです。
#viewer {
    margin: 0 auto;
    width: 600px;
    height: 250px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
#viewer img {
    top: 0;
    left: 0;
    position: absolute;
}

widthとheightで画像サイズを指定して、

position を使い、全ての画像を重ねます。

3javascriptを以下の通り記述すれば完成です。
// 予めjQueryを読み込みます


// 以下のコードを記述します

jQueryは予め読み込んでおきましょう。
「setImg」にimgタグを囲う要素のidまたはclassを指定します。
「fadeSpeed」にはフェードするスピードを指定します。
「switchDelay」には画像が切り替える時間を指定します。

setInterval()を使用し、指定した時間で繰り返し処理を行います。

これで完成です。

トップへ