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 をよろしくお願いいたします。

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