jsを使用してシンプルなカルーセル効果を実現する

jsを使用してシンプルなカルーセル効果を実現する

この記事では、シンプルなカルーセル効果を実現するための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">&lt; </div>
        <div class="right">&gt;</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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS は複数のタブを切り替えるカルーセルを実装します
  • カルーセル効果を実現するネイティブJavaScript
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)
  • シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • カルーセル例の JavaScript 実装

<<:  MySQLの自動増分IDについて知っておくべきこと

>>:  Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました

推薦する

枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

<iframe src=”ページのURL” width=”100″ height=”30″ f...

NodeJS は画像テキスト分割を実現します

この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

Jenkins は Docker イメージを構築し、Harbor ウェアハウスにプッシュします

目次DockerファイルドキュメントJenkins の設定Spring Boot プロジェクトでは、...

HTML でのアンカーポイントの使用_PowerNode Java アカデミー

ここで、アンカー ポイントを制御するいくつかの状況をまとめてみましょう。 1. 同じページ <...

Javascript のスコープとクロージャの詳細

目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...

Vue でルーティング遷移効果を実装する 4 つの方法

Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...

MySQL でテーブルスペースの断片化を解消する詳細な例

MySQL でテーブルスペースの断片化を解消する詳細な例断片化の原因(1)テーブルのストレージは断片...

この記事ではCSSボーダーの使い方を説明します

境界線のスタイルborder-style プロパティは、表示する境界線の種類を指定します。 bord...

sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する

需要シナリオ:上司は、クロ​​ーラーを使用してMySQLデータベースにデータを書き込んだり更新したり...

Linux カーネル デバイス ドライバー 高度な文字デバイス ドライバーのメモ

/****************** * 高度な文字デバイス ドライバー ***********...

削除、切り捨て、ドロップの違いと選択方法

序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

jsオブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順

この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...