jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果：

実装コード: スワイパーコンポーネントと一緒に使用する必要があります

Swiper 基本デモアドレス:

https://www.swiper.com.cn/demo/index.html

HTML:

<div class="スワイパーコンテナボックス">
    <div class="スワイパーラッパーメインタイムライン">
      <div class="スワイパースライドタイムラインfd-active-line">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2019年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2018年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2017年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2016年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2015年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2014年
          </div>
        </a>
        <div class="xians"></div>
      </div>
    </div>
  </div>
  <ul class="イベントリスト">
    <div>
      <h3 id="2012">2019</h3>
      <img src="./img/lh.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2012">2018</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2017</h3>
      <img src="./img/lkss.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2016</h3>
      <img src="./img/luhu.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2015</h3>
      <img src="./img/luhuwhite.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2014</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
  </ul>
  </div>

所需外部鏈接文件：

<script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
  <script src="js/swiper-bundle.min.js" type="text/javascript"></script>
  <link rel="スタイルシート" href="css/swiper-bundle.min.css" rel="外部nofollow" >

.ページ {
  幅: 100%;
}
 
.メインタイムライン{
  フォントファミリー: 'Roboto'、サンセリフ;
  幅: 200ピクセル;
  位置: 相対的;
  フロート: 左;
}
 
.main-timeline:after {
  コンテンツ： '';
  表示: ブロック;
  クリア: 両方;
}
 
.main-timeline:before {
  /* コンテンツ： '';
  高さ: calc(100% + 80px);
  幅: 0px;
  境界線: 2px 実線 #0870C5;
  変換: translateX(-50%);
  位置: 絶対;
  左: 114px;
  上: 0px; */
}
 
.メインタイムライン .タイムライン {
  幅: 4%;
  /* パディング: 140px 70px 0 25px; */
  マージン: 0 50px 0 0;
  フロート: 左;
  位置: 相対的;
}
 
.メインタイムライン .タイムラインコンテンツ {
  /* パディング: 15px 15px 15px 40px;
  境界線: 2px 実線 #00A79B; */
  境界線の半径: 15px 0 15px 15px;
  表示: ブロック;
  位置: 相対的;
}
 
.main-timeline .timeline-content:hover {
  テキスト装飾: なし;
}
 
.fd-active-line .timeline-content:after {
  コンテンツ： '';
  背景色: #00A79B;
  高さ: 18px;
  幅: 15px;
  位置: 絶対;
  右: -43px;
  上: 27px;
  /* クリップパス: ポリゴン(100% 0, 0 0, 0 100%); */
}
 
.メインタイムライン .タイムライン年 {
  色: #fff;
  背景色: #00A79B;
  フォントサイズ: 24px;
  フォントの太さ: 900;
  テキスト配置: 中央;
  行の高さ: 80px;
  高さ: 80px;
  幅: 80ピクセル;
  境界線の半径: 50%;
  位置: 絶対;
  右: -120px;
  上: -40px;
}
 
.main-timeline .timeline-year:after {
  コンテンツ： '';
  高さ: 100px;
  幅: 100ピクセル;
  境界線: 8px 実線 #00A79B;
  左境界線の色: 透明;
  境界線の半径: 50%;
  変換: translateX(-50%) translateY(-50%) 回転(-20deg);
  位置: 絶対;
  左: 50%;
  上位: 50%;
}
 
.メインタイムライン .タイムラインアイコン {
  色: #fff;
  背景色: #00A79B;
  フォントサイズ: 35px;
  テキスト配置: 中央;
  行の高さ: 50px;
  高さ: 50px;
  幅: 50px;
  境界線の半径: 50%;
  変換: translateY(-50%);
  位置: 絶対;
  上位: 50%;
  左: -25px;
  遷移: すべて 0.3 秒;
}
 
.メインタイムライン.タイトル{
  色: #222;
  フォントサイズ: 20px;
  フォントの太さ: 900;
  テキスト変換:大文字;
  文字間隔: 1px;
  マージン: 0 0 7px 0;
}
 
.メインタイムライン .説明 {
  色: #222;
  フォントサイズ: 15px;
  文字間隔: 1px;
  テキスト配置: 両端揃え;
  マージン: 0 0 5px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-content {}
 
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  変換: rotateY(180deg);
  右: 自動;
  左: 123px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-year:after {
  変換: translateX(-50%) translateY(-50%) 回転(200度);
}
 
.main-timeline .timeline:nth-child(even) .timeline-icon {
  左: 自動;
  右: -25px;
}
 
.timeline:n番目の子(4n+2) .timeline-content,
.timeline:n番目の子(4n+2) .timeline-year:after {
  境界線の色: #9E005D;
}
 
.timeline:n番目の子(4n+2) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+2) .timeline-content:after,
.timeline:n番目の子(4n+2) .timeline-icon,
.timeline:n番目の子(4n+2) .timeline-year {
  背景色: #9E005D;
}
 
.timeline:n番目の子(4n+3) .timeline-content,
.timeline:n番目の子(4n+3) .timeline-year:after {
  境界線の色: #f24f0e;
}
 
.timeline:n番目の子(4n+3) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+3) .timeline-content:after,
.timeline:n番目の子(4n+3) .timeline-icon,
.timeline:n番目の子(4n+3) .timeline-year {
  背景色: #f24f0e;
}
 
.timeline:n番目の子(4n+4) .timeline-content,
.timeline:n番目の子(4n+4) .timeline-year:after {
  境界線の色: #0870C5;
}
 
.timeline:n番目の子(4n+4) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+4) .timeline-content:後、
.timeline:n番目の子(4n+4) .timeline-icon,
.timeline:n番目の子(4n+4) .timeline-year {
  背景色: #0870C5;
}
 
@media スクリーンと (最大幅:767px) {
  .main-timeline:before {
    表示: なし;
  }
 
  .メインタイムライン .タイムライン {
    幅: 100%;
    パディング上部: 80px;
    右パディング: 12px;
    下マージン: 20px;
  }
 
  .main-timeline .timeline:nth-child(even) {
    左パディング: 10px;
    パディング上部: 80px;
    下マージン: 20px;
  }
 
  .メインタイムライン .タイムラインコンテンツ、
  .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
    背景色: #fff;
    パディング上部: 25px;
  }
 
  .main-timeline .timeline-content:after {
    表示: なし;
  }
 
  .メインタイムライン .タイムライン年 {
    フォントサイズ: 24px;
    行の高さ: 70px;
    高さ: 70px;
    幅: 70ピクセル;
    右: 0;
    上: -65px;
  }
 
  .main-timeline .timeline-year:after {
    表示: なし;
  }
 
  .main-timeline .timeline:nth-child(even) .timeline-year {
    左: 3px;
  }
}
 
@media スクリーンと (最大幅:567px) {
  .メインタイムライン.タイトル{
    フォントサイズ: 18px;
  }
}
 
.スワイパーコンテナ{
  幅: 205ピクセル;
  高さ: 500px;
  フロート: 左;
}
 
.スワイパースライド{
  テキスト配置: 中央;
  フォントサイズ: 18px;
  背景: #fff;
 
  /* スライドのテキストを垂直に中央揃えにする */
  ディスプレイ: -webkit-box;
  ディスプレイ: -ms-flexbox;
  ディスプレイ: -webkit-flex;
  ディスプレイ: フレックス;
  -webkit-box-pack: 中央;
  -ms-flex-pack: 中央;
  中央揃え
  コンテンツの中央揃え: 中央;
  -webkit-box-align: 中央;
  -ms-flex-align: 中央;
  -webkit-align-items: 中央;
  アイテムの位置を中央揃えにします。
}
 
@media (最大幅: 760px) {
  .スワイパーボタンの次へ{
    右: 20px;
    変換: 回転(90度);
  }
 
  .スワイパーボタン前へ{
    左: 20px;
    変換: 回転(90度);
  }
}
.イベントリスト画像{
  幅: 880ピクセル;
  高さ: 470ピクセル;
  オブジェクトフィット: カバー;
}
.xians {
  幅: 3px;
  高さ: 100%;
  背景: #0870C5;
  位置: 絶対;
  左: 82px;
  Zインデックス: -1;
}

js:

 <スクリプト>
    $(関数() {
      $(".main-timeline .timeline").click(function () {
        var TAG = $(this).siblings().length;
        タグ >= 1 の場合
          var インデックス = $(this).index()
          $(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
          $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new Swiper('.swiper-container', {
        スライド数: 4,
        方向: '垂直'、
        ナビゲーション:
          nextEl: '.swiper-button-next',
          前へ: '.swiper-button-prev',
        },
        の上： {
          サイズ変更: 関数 () {
            スワイパーの方向を変更します。
          }
        }
      });
    });
  </スクリプト>

jQuery を使用してタイムラインのスライド年タブ切り替えを実装する方法 (タイムラインのスライド効果を実現するスワイパーコンポーネントを使用) に関するこの記事はこれで終わりです。より関連性の高い jQuery タイムラインスライド切り替えコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: