この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 transform = translateX() を使用した画像の切り替え <スタイル> 。箱 { 位置: 相対的; オーバーフロー: 非表示; マージン: 200px 自動; 幅: 600ピクセル; 高さ: 400px; } .img { 幅: 3000ピクセル; 高さ: 400px; } 画像 { フロート: 左; 幅: 600ピクセル; 高さ: 400px; } .btn{ 位置: 絶対; 上: 350px; 左: 245px; 幅: 110ピクセル; 高さ: 20px; } .dian { フロート: 左; マージン: 5px; 幅: 12px; 高さ: 12px; 境界線の半径: 50%; 背景色: rgba(255, 255, 255, 0.3); カーソル: ポインタ; } 。左、 。右 { 表示: なし; ボックスのサイズ: 境界線ボックス; 位置: 絶対; 上: 150px; 幅: 50px; 高さ: 100px; 背景色: rgba(0, 0, 0, 0.521); フォントサイズ: 40px; 行の高さ: 100px; 色: #fff; } .box:hover .left, .box:hover .right { 表示: ブロック; } 。左 { 左パディング: 10px; 左: 0; } 。右 { 右パディング: 10px; テキスト配置: 右; 右: 0; } </スタイル> <div class="box"> <div class="img"> <img src="./img/1.jpeg" alt=""> <img src="./img/2.jpeg" alt=""> <img src="./img/3.jpeg" alt=""> <img src="./img/4.jpeg" alt=""> <img src="./img/5.jpeg" alt=""> </div> <div class="btn"> <span class="dian"></span> <span class="dian"></span> <span class="dian"></span> <span class="dian"></span> <span class="dian"></span> </div> <div class="left">< </div> <div class="right">></div> </div> <スクリプト> var btn = document.getElementsByClassName('btn')[0]; var imgBox = document.getElementsByClassName('img')[0]; var imgs = imgBox.getElementsByTagName('img'); var btnChild = document.getElementsByClassName('dian'); var k = 0; // ボタンにカスタムプロパティを追加します for (var i = 0; i < btnChild.length; i++) { btnChild[i].dataset.num = i * 600; } // デフォルトは最初の画像で、最初のボタンは白です btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)'; // ボタンをクリックすると画像が切り替わり、ボタンの色も変わります btn.onclick = function(e) { e.target.nodeName === 'SPAN' の場合 { // まずすべてのボタンをデフォルトの色に設定します for (var i = 0; i < btnChild.length; i++) { btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)'; } // クリックされたボタンの色が変わります k = +e.target.dataset.num; コンソールログ(k); btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)'; // 画像を切り替える imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`; } } // 画像の長さを取得します // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2); var imgWidth = imgs[0].offsetWidth; // タイマーが画像を移動します var interval1 = setInterval(move, 1000); var 間隔; // 関数は画像を移動し、ボタンを変更します。function move() { k += 画像の幅; if (k === imgWidth * imgs.length) { 0 = 0; } // 画像を移動する imgBox.style.transform = `translateX(-${k}px)`; // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) { btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)'; } btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)'; } // タイマーを削除するには、マウスを画像に移動します。var box = document.getElementsByClassName('box')[0]; box.onmouseover = 関数() { 間隔をクリアします(間隔1); clearInterval(間隔); } // マウスを外に出すとタイマーが開始されます box.onmouseout = function() { 間隔 = setInterval(移動、1000); } var leftBtn = document.getElementsByClassName('left')[0]; var rightBtn = document.getElementsByClassName('right')[0]; rightBtn.onclick = 関数() { k += 画像の幅; if (k === imgWidth * imgs.length) { 0 = 0; } // 画像を移動する imgBox.style.transform = `translateX(-${k}px)`; // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) { btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)'; } btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)'; } leftBtn.onclick = 関数() { k -= 画像の幅; (k < 0) の場合 { k = 画像の幅 * (画像の長さ - 1); } imgBox.style.transform = `translateX(-${k}px)`; // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) { btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)'; } btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)'; } </スクリプト> 効果画像: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました
目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...
1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...
<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...
他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...
この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...
リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...
最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...
目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...
目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...
目次1. 手順1. ボタンの権限を定義する2. ストアを定義する3. 権限指示を作成する4. パーミ...
目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...
目次1. 概要1. スカイウォーキング入門2. スカイウォーキング建築3. スカイウォーキングはどの...
この記事では、jQuery キャンバスを使用して QR コード付きのポスターを生成するための具体的な...
目次Docker入門Docker環境のインストールDockerイメージの共通コマンド検索ミラー画像を...
目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...