序文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 の簡単な紹介
公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...
VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...
ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...
Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...
SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...
MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...
前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...
type="radio" や type="checkbox"...
目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...
1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...