カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイントがたくさんあるからです。以下はカルーセルの作り方を学ぶプロセスです。 困難: 1. 以下の対応する円と画像を動的に自動生成する方法 効果: コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> * { パディング: 0; マージン: 0; } { テキスト装飾: なし; 色: 白; 行の高さ: 50px; テキスト配置: 中央; } li { リストスタイル: なし; } .tb-プロモーション { 位置: 相対的; 幅: 700ピクセル; 高さ: 300px; マージン: 自動; オーバーフロー: 非表示; } .tb-プロモ .imgg { 位置: 絶対; 上: 0; 左: 0; 幅: 3000ピクセル; } .tb-promo .imgg li { フロート: 左; } .tb-promo .imgg li img { 幅: 700ピクセル; 高さ: 300px; } .tb-プロモ .prev { 表示: なし; 位置: 絶対; 上: 125px; 左: 0; 幅: 25px; 高さ: 50px; 背景色: rgba(0, 0, 0, 0.2); 右上の境界線の半径: 25px; 右下の境界線の半径: 25px; zインデックス: 999; } .tb-promo .prev:hover { 背景色: rgba(0, 0, 0, 0.5); } .tb-プロモ .next { 表示: なし; 位置: 絶対; 上: 125px; 右: 0; 幅: 25px; 高さ: 50px; 背景色: rgba(0, 0, 0, 0.2); 左上の境界線の半径: 25px; 左下の境界線の半径: 25px; zインデックス: 999; } .tb-promo .next:hover { 背景色: rgba(0, 0, 0, 0.5); } .tb-プロモ .プロモ-nav { 位置: 絶対; 上: 270px; 左: 50%; 左マージン: -40px; 高さ: 25px; } .tb-promo .promo-nav li { フロート: 左; 幅: 16px; 高さ: 16px; 背景色: 白; 境界線の半径: 8px; マージン: 4px; } .tb-プロモ .プロモnav .one { 背景色: トマト; } </スタイル> </head> <本文> <div class="tb-promo"> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> <ul class="imgg"> <li><img src="./61.jpeg" alt=""></li> <li><img src="./62.jpeg" alt=""></li> <li><img src="./63.jpeg" alt=""></li> </ul> <ol class="promo-nav"> </ol> </div> <スクリプト> var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var tbpromo = document.querySelector('.tb-promo'); var ul = document.querySelector('ul'); var ol = document.querySelector('ol'); //アニメーション関数 function animate(obj, target) { clearInterval(obj.timer); // 複数回のクリックを防ぐために呼び出します obj.timer = setInterval(function () { var ステップ = (ターゲット - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 正と負の値を丸める if (obj.offsetLeft == target) { タイマー間隔をクリアします。 } それ以外 { obj.style.left = obj.offsetLeft + ステップ + 'px'; } }, 10) } // 動的なナビゲーション サークルを生成します var tbpromWidth = tbpromo.offsetWidth; (var i = 0; i < ul.children.length; i++) の場合 { var li = document.createElement('li'); ol.appendChild(li); //カスタム属性を通じてインデックス番号を記録します li.setAttribute('index', i); //円の色の変更を記述するための独自のアイデア li.addEventListener('click', function () { // すべての円の色をクリアします for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'one'; var index = this.getAttribute('index'); // li をクリックし、li のインデックス番号をコントロール変数に割り当てます。num = index; 円=インデックス; アニメーション化(ul, -index * tbpromWidth); }) ol.children[0].className = 'one'; } //最初の画像 li を複製し、シームレスに切り替えるために最後に配置します。var frist = ul.children[0].cloneNode(true); ul.appendChild(frist); //次のページと前のページを非表示にして表示する tbpromo.addEventListener('mouseenter', function () { prev.style.display = 'ブロック'; next.style.display = 'ブロック'; タイマーの間隔をクリアします。 timer=0; // タイマー変数をクリアする }) tbpromo.addEventListener('mouseleave', 関数() { prev.style.display = 'なし'; next.style.display = 'なし'; タイマー = setInterval(関数() { next.click(); // クリックイベントを手動で呼び出す}, 1500) }) //次の前のアニメーション var num = 0; // 制御円 var circle = 0; //スロットルバルブ変数 var flag=true; //次のページ next.addEventListener('click', function () { //最後はulを判断してleftを0に戻す num == (ul.children.length - 1) の場合 { ul.style.left = 0; 数値 = 0; } 数値++; アニメーション化(ul, -num * tbpromWidth); サークル++; (円 == 3)の場合{ 円 = 0; } (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'one'; }) //前のページ prev.addEventListener('click', function () { 数値 == 0 の場合 num = ul.children.length-1; ul.style.left = -num*tbpromWidth+'px'; } それ以外 { 数値--; アニメーション化(ul, -num * tbpromWidth); 丸 - ; (円<0)の場合{ 円 = 2; } (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'one'; } }) //自動再生 var timer = setInterval (function () { next.click(); // クリックイベントを手動で呼び出す}, 2000) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker-compose インストール db2 データベース操作
>>: MySQLクエリ条件のnot inとinの違いと理由
HTML 開発の歴史: HTML は英語で Hypertext Marked Language の...
・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...
まず、データベース パーティショニングとは何でしょうか?以前、MySQL のテーブル パーティショニ...
Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...
目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...
WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...
目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...
1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...
データベースのバックアップ #文法: # mysqldump -h server-u usernam...
大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...
1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...
目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...
Azure Container Registry は、Docker Registry 2.0 仕様に...