序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデアは何ですか?
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><</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>></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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介
表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...
まず次のコマンドを実行します: [root@mini61 setuptools-8.2.1]# py...
<br /> この記事は allwebdesignresources.com から Ra...
目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...
MySQL でカーソルを宣言する方法: 1. 変数とカーソルを宣言する 結果をvarchar(300...
1. 問題の説明MYSQL を起動すると、図に示すように、「ERROR 2003 (HY000): ...
便利なターミナル エミュレーターである Xshell は、開発者がホスト サーバーをリモート管理する...
多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...
新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...
フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...
操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...
最近、セキュリティ製品をテストする必要があったため、mariadb の起動ユーザーを root に調...
nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...