【jQuery】画像を時間経過で自動的にふわっと切り替える方法

2020-12-17

今回はjQueryを使って、ページ内の画像を時間経過で自動的にフェードイン&フェードアウトさせて切り替える方法について、記載していきます。

「ポーズを切り替える女の子」

使用されるケース

WebサイトTOPページのメインビジュアルに使用されるケースがほとんどです。

画像に注目させる効果、サイトに期待感を持たせる効果が見込まれます。

サンプル

こちらから確認できます。

方法

jQueryを使って実装していきます。

なお、「jQueryが良く分からない」「基礎が知りたい」という方は、別にjQueryの入門用記事を書きましたので、合わせてご覧ください。

かなり分かりやすく書いたつもりです。

HTMLにおいて、該当の部分は下記のように記述します。

<div class="img-wrap">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>

画像を表示させる領域を<div>で作成します。
ここでは「img-wrap」というクラスを付けています。

「img-wrap」の子要素として、画像タグの<img>を表示させたい順番で記述していきます。

cssは下記のように記述します。

.img-wrap {
    width: 800px;
    position: relative;
}

.img-wrap img {
    width:100%;
    position: absolute;    
}

「img-wrap」に「position: relative」、子要素の「img」に「position: absolute」を設定し、各画像の配置する位置を揃えます。

また、 「img-wrap」に「width: ○○ 」、子要素の「img」に「width: 100%」 を指定することで、「img-wrap」の「width」を変更すると子要素の全ての画像の大きさを変更することができます。
※画像切り替えの機能と直接は関係ないですが、便利です

これらの設定で、「img-wrap」内の同じ位置に画像が何枚も重なった状態になります。

ここから下記のようにjQueryで動きをつけていきます

 $('.img-wrap img:nth-child(n+2)').hide();
      setInterval(function() {
        $(".img-wrap img:first-child").fadeOut(2000);
        $(".img-wrap img:nth-child(2)").fadeIn(2000);
        $(".img-wrap img:first-child").appendTo(".img-wrap");
      }, 4000);
});

$('.img-wrap img:nth-child(n+2)’).hide();
の記述で、2枚目以降の画像を初期状態で非表示にしています。

setInterval(function() {~}, 4000);
では、括弧内の処理を4秒おきに繰り返し実行させています。

$(“.img-wrap img:first-child").fadeOut(2000);
は1枚目の画像を2秒かけてフェードアウトさせるように、
$(“.img-wrap img:nth-child(2)").fadeIn(2000);

では2枚目の画像を2秒かけてフェードインするように命令しています。

$(“.img-wrap img:first-child").appendTo(“.img-wrap");
の記述で、画像の1枚目を「img-wrap」内の最後に移動させるように命令しています。

これで完成です。

「fadeOut」と「fadeIn」、「setInterval」の指定時間は適宜変更してOKですが、上記くらいがストレスを与えない時間かと個人的には思います。

特に画像に文字が入っている場合、上記より早いペースで画像が切り替わると読みにくくてストレスを与えてしまい本末転倒に感じます。

色々と試してみてください!