今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡単に学べる事例を書いていきます! ! ルールはこれまでと同じですが、実装効果を見てみましょう。 ! カルーセルの作成方法を学ぶための最初のステップは、画像を準備し、ul 内の li でそれらをラップし、li にフロートを与えて 1 行に表示されるようにすることです。ただし、ul の幅を十分に広くするように注意してください。 ! さて、HTMLとCSSのコードは次のとおりです(ファイル名:index.html) <!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> <script src="animate.js"></script> <script src="slideshow.js"></script> <スタイル> 体 { 背景色: rgb(151, 147, 147); } * { マージン: 0; パディング: 0; } div { オーバーフロー: 非表示; 位置: 相対的; 幅: 500ピクセル; 高さ: 500px; 背景色: スカイブルー; マージン: 20px 自動; } ul { リストスタイル: なし; } .img { 幅: 600%; 位置: 絶対; 左: 0; } li { フロート: 左; } 画像 { 幅: 500ピクセル; 高さ: 500px; } .yuan>li { カーソル: ポインタ; 幅: 10px; 高さ: 10px; 背景色: rgb(190, 185, 185); 境界線の半径: 50%; マージン: 0 5px; 境界線: 1px実線rgb(119, 114, 114); } 。元 位置: 絶対; 下: 10px; 左: 50%; 変換: translateX(-50%); } .yuan .color { 背景色: rgb(228, 135, 135); } { テキスト装飾: なし; 色: 黒; 背景色: rgb(112, 111, 111); 表示: インラインブロック; 幅: 30ピクセル; 高さ: 30px; テキスト配置: 中央; 行の高さ: 30px; 位置: 絶対; 上位: 50%; 変換: translateY(-50%); 表示: なし; } 。左 { 左: 0; } 。右 { 右: 0; } </スタイル> </head> <本文> <div class="box"> <ul class="img"> <li><img src="images/1.webp" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.webp" alt=""></li> <li><img src="images/4.webp" alt=""></li> <li><img src="images/5.webp" alt=""></li> </ul> <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="left"><</a> <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="right">></a> <ul class="元"></ul> </div> </本文> </html> このように書くと、基本的なアウトラインが完成します。 次のステップは、動かすことです。画像を動かすにはどうしたらよいか考えてみましょう。学んだアニメーション効果でしょうか? これらすべての場所で、画像を切り替える効果を実現するためにスローモーション アニメーションを使用する必要があります。js コードが多数あるため、コードをカプセル化するために新しい js ファイルを作成する必要があります。 以下はカプセル化された js コードです (ファイル名: slideshow.js) window.addEventListener('load', 関数() { var img = document.querySelector('.img'); var yuan = document.querySelector('.yuan'); var box = document.querySelector('.box'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); var imgwidth = box.offsetWidth; //ボックスの幅(画像の幅)を取得します // マウスがトリガーされた後に画像の自動スクロールを停止します box.addEventListener('mouseenter', function () { left.style.display = 'ブロック'; right.style.display = 'ブロック'; タイマーの間隔をクリアします。 }) // マウスを離すと画像の自動スクロールがトリガーされ、再度トリガーされます box.addEventListener('mouseleave', function () { left.style.display = 'なし'; right.style.display = 'なし'; タイマー = setInterval(関数() { 右クリック(); }, 2000) }) // 図に従って次のドットを追加します for (var i = 0; i < img.children.length; i++) { var li = document.createElement('li'); yuan.appendChild(li); li.setAttribute('日付インデックス', i); li.addEventListener('クリック', 関数() { (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } this.className = '色'; var index = this.getAttribute('date-index'); var imgwidth = box.offsetWidth; // アニメーション化(obj,target,function(){}) アニメーション化(img, -index * imgwidth); nums = インデックス; 色 = インデックス; }) } // デフォルトでは、最初のドットの色は yuan.children[0].className = 'color' です。 var 数値 = 0; var 色 = 0; // シームレススクロールを準備するために最初の画像を最後にコピーします。var li = img.children[0].cloneNode(true); img.appendChild(li); var フラグ = true; // 右側のボタン、次のボタンに切り替えると、ドットが一緒に変化しますright.addEventListener('click', function () { if (フラグ) { フラグ = false; if (nums == img.children.length - 1) { 数値 = 0; 左から0まで } 数値++; アニメーション(画像、-nums * 画像幅、関数() { フラグ = true; }); 色++; if (colors == yuan.children.length) { 色 = 0; } (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // 左ボタンが次のボタンに切り替わり、ドットも一緒に変化しますleft.addEventListener('click', function () { if (フラグ) { フラグ = false; (数値 == 0)の場合{ nums = img.children.length - 1; img.style.left = -nums * imgwidth + 'px'; } 数字--; 色 - ; アニメーション(画像、-nums * 画像幅、関数() { フラグ = true; }); (色<0)の場合{ 色 = yuan.children.length - 1; } // 色 == 0 の場合 { // colors = yuan.children.length; // } // 色--; (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // マウスが画像上を通過しなくても自動的にスクロールします var timer = setInterval(function () { 右クリック(); }, 2000) }) ここで重要な点があります。アニメーション効果なしで動かすにはどうすればよいのでしょうか。将来他のケースを書くときに直接参照できるように、js ファイルを別途カプセル化しました。 コードは以下のとおりです(ファイル名:animate.js) function animate(obj, target, callback) { // 移動するオブジェクト(移動する人)、移動先、コールバック関数 // 最初に前のタイマーをクリアし、現在のタイマーのみを保持して実行します clearInterval(obj.timer); obj.timer = setInterval(関数() { // ステップ長をタイマーに書き込みます var step = (target - obj.offsetLeft) / 10; // ステップ長の式: (ターゲット位置 - 現在の位置) / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //ステップの長さを整数に変更します。小数点は使用せず、正の数は切り上げ、負の数は切り捨てます。if (obj.offsetLeft == target) { clearInterval(obj.timer) //アニメーションを停止し、基本的にタイマーを停止します if (callback) { callback(); //タイマーの最後にコールバック関数を記述します} } //ステップ長は、速い速度から遅い速度に減速する効果を実現するために徐々に減少する値です。obj.style.left = obj.offsetLeft + step + 'px'; },15) } 基本的に、すべてがコメント付きで明確に書かれているので、すべてのステップを理解できるはずです。 JavaScriptカルーセルの実装に関する記事はこれで終わりです。カルーセルの実装についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 12個のJavascriptテーブルコントロール(DataGrid)が整理されています
序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....
ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...
序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...
目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...
まずは効果を見てみましょう:この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花...
過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...
1. 開発環境 vue+vant 2. コンピュータシステム Windows 10 Profess...
1) 適用範囲:読み取り専用:input[type="text"],input[...
この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...
JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...
アンカーポイントの設定<a name="トップ"></a>...
メインライブラリの実行 CREATE DATABASE test CHARACTER SET utf...
多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...