この記事では、シンプルなカルーセル効果を実現するための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 パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました
<iframe src=”ページのURL” width=”100″ height=”30″ f...
この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...
ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...
目次DockerファイルドキュメントJenkins の設定Spring Boot プロジェクトでは、...
ここで、アンカー ポイントを制御するいくつかの状況をまとめてみましょう。 1. 同じページ <...
目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...
Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...
この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...
MySQL でテーブルスペースの断片化を解消する詳細な例断片化の原因(1)テーブルのストレージは断片...
境界線のスタイルborder-style プロパティは、表示する境界線の種類を指定します。 bord...
需要シナリオ:上司は、クローラーを使用してMySQLデータベースにデータを書き込んだり更新したり...
/****************** * 高度な文字デバイス ドライバー ***********...
序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...
1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...
この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...