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

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" >

CS

.ページ {
  幅: 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery マウスオーバー水平タイムラインスタイル (コード詳細説明)
  • JQuery を使用して、美しく実用的なタイムラインをいくつか実装します (サンプル コード付き)
  • JQuery タイムライン エフェクト (3 つの異なるタイプ)
  • jQuery アダプティブカルーセルプラグイン Swiper の使用例

<<:  HTML タグのコンテンツを編集するには、contenteditable 属性を設定します (textarea を置き換えることができます)

>>:  DockerにRedisコンテナをインストールするための実装手順

推薦する

MySQL での IN データボリュームの使用の最適化された記録

MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問：ケース（１）子スレッドを作成する前にフォークするケース（２）子スレッドを作成した後にフォー...

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

CentOS 6 または CentOS 7 でディスク領域をクリアする方法

以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

WeChatアプレットは固定ヘッダーとリストテーブルコンポーネントを実装します

目次必要：機能ポイントレンダリング実装のアイデア具体的なコード（react\taro3.0）特定のコ...

Vueコンポーネントが相互に値を転送する方法の詳細な説明

目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で（お腹に触れることで）私たちに現れます。ミニプログラムでデ...

JavaScript の例におけるループの使用法の詳細な説明

退屈だったので、ループに関する簡単な演習をいくつかまとめてみました。JS を学び始めたばかりの方に役...

MySQL テーブル作成外部キー エラーの解決方法

データベーステーブルA: テーブル task_desc_tab を作成します （ id INT(11...