js を使用して年カルーセル選択効果をネイティブに実装する例

js を使用して年カルーセル選択効果をネイティブに実装する例

序文

js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。

1. アイデアは何ですか?

  • レイアウト: 左矢印と右矢印はエンティティ文字 < と > を使用します (Year 5 の範囲)。フレックスレイアウトを使用して水平に配置します。
  • js ロジック: (注: 年データは数値配列です)
    • a> 。デフォルトでは、最初の 5 年間のデータが表示されます。
    • b>. firstIndex は、表示される 5 年間の開始インデックスを記録します。 firstIndex+5 が year 配列の長さと正確に等しくなり、それ以上増加しなくなるまで、右矢印 +1 をクリックします。 firstIndex が 0 になり、それ以上減少しなくなるまで、左矢印 -1 をクリックします。初期値は0です。
    • c>.selectedIndex は現在クリックして選択されている年のインデックスを記録します。最初の 2021 がデフォルトで表示されます。初期値: 0。
    • d>.firstIndex 値が変化すると、firstIndex、firstIndex+1、firstIndex+2…firstIndex+4 に対応する年が取得され、ページにレンダリングされます。そして、これら 5 つのインデックスの 1 つは selectedIndex と等しく、これは選択された年が現在のページに表示されている年の中にあることを意味します。したがって、同じインデックスに対応するスパンは選択したスタイルを追加し、他の 4 つのスパンは選択したスタイルを削除します。
  • css: 左矢印と右矢印のロジック、すべてのクリック可能なスタイルがデフォルトで追加されます: firstIndex=0、左クリック可能なスタイルを削除、firstIndex+5=年配列の長さ、右クリック可能なスタイルを削除します。

2. すべてのコード

1.html

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <link rel="スタイルシート" href="index.css" rel="外部nofollow" type="text/css"/>
 <script type="text/javascript" src="echarts.min.js"></script>
 <script type="text/javascript" src="index.js"></script>
</head>
<本文>
<div class="コンテナ">

 <div id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;">
 <span>&lt;</span>
 </div>
 <div id="wrap" class="wrap">
 <span onclick="選択済み(これ)">1</span>
 <span onclick="選択済み(これ)">2</span>
 <span onclick="選択済み(this)">3</span>
 <span onclick="選択済み(これ)">4</span>
 <span onclick="selected(this)">5</span>
 </div>
 <div id="right" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="on" onselectstart="return false;">
 <span>&gt;</span>
 </div>

</div>

<div class="content" id="content">

</div>
</本文>
</html>

2.js

コードは次のとおりです。

window.onload = 関数(){
 //最初のレンダリングリスト initList(firstIndex);
};

yearArr = [2007、2008、2009、2010、2011、2012、2013、2014、2015、2016、2017、2018、2019、2020、2021] とします。
年Arr.reverse();

//開始インデックス let firstIndex = 0;
// 選択されたインデックス。デフォルトでは最初のものが選択されます。let selectedIndex = 0;


/**
 * 初期化リスト */
関数 initList(firstIndex) {

 //ページ スパン リストをレンダリングします。let spanList = document.getElementById('wrap').getElementsByTagName('span');
 (i = 0 とします; i < spanList.length; i++) {
 インデックス = firstIndex + i; とします。
 span = spanList[i]とします。
 span.innerText = yearArr[インデックス];

 //追加および削除するスタイルを選択します if (index === selectedIndex) {
  span.classList.add('アクティブ');
 } それ以外 {
  span.classList.remove('アクティブ')
 }
 }
 //ページ コンテンツの表示値 document.getElementById('content').innerText = '現在選択されている年:' + yearArr[selectedIndex];
}

/**
 * 次のページ */
関数 clickNext(div) {
 (firstIndex + 5 < yearArr.length) の場合 {
 最初のインデックス = 最初のインデックス + 1;
 initList(最初のインデックス)
 }
 矢印アクティブ();
}

/*
* 前のページ */
関数 clickBefore(div) {
 (最初のインデックス>0)の場合{
 最初のインデックス = 最初のインデックス - 1;
 initList(最初のインデックス)
 }
 矢印アクティブ();
}

/**
 * 選択 */
関数 selected(span) {
 値を span.innerText とします。
 index = yearArr.findIndex((el) => { とします。
 el + "" === 値を返します。
 })
 selectedIndex = インデックス !== -1 ? インデックス : 0;
 リストを初期化します(最初のインデックス);
}

/**
 * 左矢印と右矢印が有効 * firstIndex = 0: 右が有効、左は無効 * firstIndex = length-5: 左が有効、右は無効 * その他: すべて有効 */
関数 arrowActive() {
 左 = document.getElementById('left') とします。
 右 = document.getElementById('right') とします。
 左のクラスリストに('arrow_active')を追加します。
 右のクラスリストに('arrow_active')を追加します。
 (firstIndex === 0)の場合{
 左のクラスリストを削除します('arrow_active');
 } そうでない場合 (firstIndex === yearArr.length - 5) {
 右のクラスリストを削除します('arrow_active');
 }
}

2.css

コードは次のとおりです。

体{
 上マージン: 80px;
}
。容器 {

 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 マージン: 10px;
}

。包む {
 高さ: 40px;
 zインデックス: 1;
 色: 黒;
 ディスプレイ: フレックス;
 フレックス: 1;
 背景: rgba(155,226,219,0.5);
 境界線の半径: 20px;
 左マージン: 20px;
 右マージン: 20px;
}

.wrap スパン {
 フレックス: 1;
 テキスト配置: 中央;
 高さ: 40px;
 行の高さ: 40px;
 境界線の半径: 20px;

}

。アクティブ{
 背景: #1abc9c;
 色:#fff;
}



.arrow_left {
 左: 10px;
 色: 緑;
 パディング: 0px 14px;
 境界線の半径: 50%;
 フォントサイズ: 30px;
 zインデックス: 2;
}


.arrow_right {
 右: 10px;
 色: 緑;
 パディング: 0px 14px;
 境界線の半径: 50%;
 フォントサイズ: 30px;
 zインデックス: 2;
}
.arrow_active{
 色: 青;
}

。コンテンツ{
 左マージン: 30px;
}

要約する

毎日少しずつ録音して、新人から新人へと成長しましょう! ! !

js ネイティブを使用して年カルーセル選択エフェクトを実装する方法についての記事はこれで終わりです。年カルーセル選択コンテ​​ンツの js ネイティブ実装の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の年ドロップダウン リスト ボックスには、現在の年とその前後 50 年が含まれます。
  • JS 日付オブジェクトの簡単な操作 (現在の年、週、時刻を取得)
  • IE と Firefox での JavaScript getyear の互換性
  • js 出力太陰暦、太陽暦、年、月、週のサンプル コード
  • 現在の年と星座を表示できるjsコード
  • JS は年と月のサンプルコードを動的に生成します

<<:  Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

>>:  Vueページジャンプの実装方法

推薦する

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

Vue3.0 手書き拡大鏡効果

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...

CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...

Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明

Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...

Docker で SVN サーバーを構築するチュートリアル

SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...

RedisとMySQLの違いを簡単に説明してください

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

nginx の場所に複数の Proxy_pass メソッドがある

1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...