つぎつぎに写真が変わるjQuery フェイドインアウト

使用したjQuery

• hide()
• setInterval()
• fadeOut()
• fadeIn()
• removeClass()
• addClass()
• click()
• html()

jQuery のコード

// start 11_スライダー　フェイドアウト
  /// 画像の枚数
  let fade_count = $('.sliderFade11__item').length;
  /// 現在表示されているか画像番号
  var fade_current = 1;
  /// 次に表示される画像番号
  var fade_next = 2;
  /// 表示非表示のインターバル
  var fade_interval = 3000;
  /// 表示のスピード
  var fade_duration = 500;
  /// タイマー変数
  var fade_timer;
  ///　1番目以外は非表示
  $('.sliderFade11__item:not(:first-child)').hide();
  /// 間隔
  fade_timer = setInterval(slideFadeTimer, fade_interval);

  function slideFadeTimer() {
    /// 画面を差し替える
    $('.sliderFade11__item:nth-child(' + fade_current + ')').fadeOut(fade_duration);
    $('.sliderFade11__item:nth-child(' + fade_next + ')').fadeIn(fade_duration);
    fade_current = fade_next;
    fade_next = ++fade_next;
    /// 画像が最後まで回ったら最初の画像を設定する
    if (fade_next > fade_count) {
      fade_next = 1;
    }
    /// ボタン表示制御
    $('.sliderFade11__btn').removeClass('sliderFade11__target');
    $('.sliderFade11__btn:nth-child(' + fade_current +')').addClass('sliderFade11__target');
  }

$('.sliderFade11__btnLink').click(function () {
  /// 次に表示させる番号を取る
  fade_next = $(this).html();
  /// タイマーを停止して再スタート
  clearInterval(fade_timer);
  fade_timer = setInterval(slideFadeTimer, fade_interval);
  /// 関数実行
  slideFadeTimer();
    return false;
});

HTML のコード

<div class="areaBody glcontainer">
  <div class="frameBoard sliderFade11">
    <h2 class="boardTitle">いちごまつり</h2>
    <div class="sliderFade11__MainView">
      <ul class="sliderFade11__items">
        <li class="sliderFade11__item">
          <img src="img/thumb_berrycake_1.jpg" alt="thumnail 苺のケーキ1">
        </li>
        <li class="sliderFade11__item">
          <img src="img/thumb_berrycake_2.jpg" alt="thumnail 苺のケーキ2">
        </li>
        <li class="sliderFade11__item">
          <img class="sliderFade11__img" src="img/thumb_berrycake_3.jpg" alt="thumnail 苺のケーキ3">
        </li>
      </ul>
    </div><!-- .sliderSlide10__MainView -->
    <ul class="sliderFade11__areaBtn">
      <li class="sliderFade11__btn sliderFade11__target">
        <a href="#" class="sliderFade11__btnLink ">1</a>
      </li>
      <li class="sliderFade11__btn">
        <a href="#" class="sliderFade11__btnLink">2</a>
      </li>
      <li class="sliderFade11__btn">
        <a href="#" class="sliderFade11__btnLink">3</a>
      </li>
    </ul>
  </div>
</div>

CSS のコード

// 11_フェイドアウト
.sliderFade11 {
  background-color: variable.$bright5_color;

  &__MainView {
    width: 650px;
    height: 72%;
    margin-inline: auto;
    position: relative;
  }

  &__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
    margin-inline: auto;
  }

  &__areaBtn {
    padding-top: 9px;
    display: flex;
    justify-content: center;
    gap: 40px;
  }

  &__btn {
    width: 14px;
    height: 14px;
    font-size: 8px;
    color: #fff;
    border-radius: 50%;
    background-color: #fff;
  }

  &__target {
    background-color: variable.$bright1_color;
    color: variable.$bright1_color;

  }
}