「新着情報」を自動で切り替えるフェードアニメーションを追加する方法

以下に手順を示します。

1. 「新着情報」ブロックを配置します。
2. 基本設定で「仕切り線を表示する」をオフにします。

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // リスト内の各アイテム要素を取得する
  var $items = $('.info-list .info-list-item');

  // 現在表示されているアイテムのインデックス番号
  var currentIndex = 0;

  // アイテムを切り替える間隔（ミリ秒）
  var interval = 5000;

  // フェードイン・アウトにかかる時間（ミリ秒）
  var fadeDuration = 500;

  // 全アイテムを非表示した、1番目のアイテムを表示る
  $items.hide().eq(currentIndex).fadeIn(fadeDuration);

  // 指定した間隔ごとにアイテムを順番に切り替え
  setInterval(function () {
    // 現在のアイテムをフェードアウト
    $items.eq(currentIndex).fadeOut(fadeDuration, function () {
      // 次に表示するアイテムのインデックスを計算する（最後の次は最初に戻る）
      currentIndex = (currentIndex + 1) % $items.length;

      // 次のアイテムをフェードイン
      $items.eq(currentIndex).fadeIn(fadeDuration);
    });
  }, interval);
});