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 パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました

推薦する

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...

Windows 10 64 ビット版に MySQL 5.6.35 をインストールするためのグラフィック チュートリアル

1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...

HTML の小さなタグの使用に関するヒント

<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...

Web デザイン体験: 5 つの優れた Web デザイン コンセプトの完全分析 (画像)

他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...

Linux の一般的な基本コマンドと使用方法

この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

MySQL での数値のフォーマットの詳細な説明

最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...

Linux環境にDocker環境をインストールする(落とし穴なし)

目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

Vue ボタンの権限制御の導入

目次1. 手順1. ボタンの権限を定義する2. ストアを定義する3. 権限指示を作成する4. パーミ...

vue3+ts+EsLint+Prettier 標準コード実装

目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...

docker を使用して Spring Boot をデプロイし、Skywalking に接続する方法

目次1. 概要1. スカイウォーキング入門2. スカイウォーキング建築3. スカイウォーキングはどの...

jQuery キャンバスは QR コード付きのポスターを生成します

この記事では、jQuery キャンバスを使用して QR コード付きのポスターを生成するための具体的な...

開発者にとって必須の Docker コマンドの概要

目次Docker入門Docker環境のインストールDockerイメージの共通コマンド検索ミラー画像を...

React コンポーネント通信ルーティングパラメータ転送 (react-router-dom)

目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...