今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡単に学べる事例を書いていきます! ! ルールはこれまでと同じですが、実装効果を見てみましょう。 ! カルーセルの作成方法を学ぶための最初のステップは、画像を準備し、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)が整理されています
mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...
<meta name="viewport" content="w...
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...
この記事の例では、検証コードのランダム生成を実現するためのJSの具体的なコードを参考までに共有してい...
1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...
1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...
最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...
データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...
HTML と CSS で実装された登録ページ テンプレート。早速、コードを見てみましょう。更新: ...
1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...
この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...
Vueにaxiosを挿入する 'axios' から axios をインポートします。...
まず、top のいくつかのフィールドの意味を紹介します。 VIRT:仮想メモリ使用量1. プロセスが...
Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...
昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...