jQueryはシンプルなカルーセル効果を実装します

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のとおりです。

まず、背景画像、方向アイコン、インジケーターで構成されていることがわかります。背景画像、方向アイコン、インジケーターが積み重ねられているため、レイアウトするときに絶対配置を使用する必要があることがわかりました。方向アイコンをクリックすると画像がそれに応じて変化し、インジケーターをクリックすると画像がそれに応じて変化し、クリックしない場合は 5 秒ごとに自動的に再生され、クリックしない場合は方向アイコンが表示されない、という動作を実現したいと考えています。

構造レイアウト: 1 つの div を使用して 3 つの div をラップし、内部の 3 つの div にそれぞれ背景画像部分、方向アイコン部分、インジケーター部分を表示します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <link rel="スタイルシート" href="./css/lunbotu.css" >
</head>
<本文>
<!--スライドショーセクション全体-->
<div class="carousel">
    <!--画像の背景-->
    <div class="content">
        <ul>
            <li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
        </ul>
    </div>
    <!-- 左と右に移動アイコン -->
    <div class="pos">
        <a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
    </div>
    <!--インジケーター-->
    <div class="dot">
        <ul>
            <li class="active"><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</本文>
</html>

スタイルコード:自分好みの色とスタイルをデザインできます。絶対的な配置を使用する場合は、息子が父親と同じであるという原則に従う必要があることに注意してください。インターフェース上に画像を 1 つだけ表示したい場合は、overflow: hidden; を使用して余分な部分を非表示にすることができます。配置後、top: 50%; transform: translateY(-50%); vertical center display: none; を設定できます。

/*タグに付属するスタイルを削除します*/
* {
    マージン: 0;
    パディング: 0;
}
 
ul {
    リストスタイル: なし;
}
 
{
    テキスト装飾: なし;
}
 
画像 {
    幅: 100%;
}
/*カルーセル全体のレイアウトを設定する*/
.カルーセル{
    位置: 相対的;
    マージン: 40px 自動;
    幅: 1000ピクセル;
    高さ: 460ピクセル;
    境界線: 1px実線 rgba(0, 0, 0, 0.1);
    ボックスのサイズ: 境界線ボックス;
    /*余分な部分を非表示にする*/
    オーバーフロー: 非表示;
}
/*背景画像のレイアウトを設定する*/
。コンテンツ {
    位置: 絶対;
    zインデックス: 1;
}
/*左右のアイコンとインジケーターのレイアウトを設定します*/
.pos、
.dot {
    位置: 絶対;
    zインデックス: 2;
    幅: 100%;
}
/*左と右の移動アイコンを最初に垂直中央に配置し、表示されないように設定します*/
.pos {
    上位: 50%;
    変換: translateY(-50%);
    表示: なし;
}
/*左と右のアイコンの背景を設定します*/
.pos > a {
    パディング: 10px 0;
    境界線の半径: 15px;
    背景: rgba(0, 0, 0, 0.5);
}
/*左移動アイコンの位置を設定する*/
。左 {
    フロート: 左;
}
/*右移動アイコンの位置を設定する*/
。右 {
    フロート: 右;
}
/*インジケーター表示の位置を設定する*/
.dot {
    下: 30px;
    テキスト配置: 中央;
}
/*インジケーターの背景を設定する*/
.dot ul {
    表示: インラインブロック;
    パディング: 2px;
    背景: rgba(0, 0, 0, .2);
    境界線の半径: 15px;
 
}
/*ドットのサイズを設定する*/
.dot > ul > li {
    フロート: 左;
    マージン: 5px;
    幅: 10px;
    高さ: 10px;
    境界線の半径: 50%;
    背景: 白;
    カーソル: ポインタ;
}
/*現在の画像を表示するときのインジケーターの位置を設定します*/
。アクティブ {
    背景: rgba(255, 255, 255, .6) !重要;
}

JavaScript コード:最初は画像を非表示にし、デフォルトで最初の画像が表示されることに注意してください。そうでない場合、最初にどの画像をクリックしても、2 番目の画像が表示されます。次の画像を表示するときは、前の画像のマークとインジケーターをクリアする必要があります

$(関数() {
    /*現在の画像のインデックスを保存します*/
    インデックスを 0 にします。
    btn = false とします。
    /*タグ a の更新機能を削除します*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*最初に写真を非表示にして、デフォルトで最初の写真を表示します*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').show();
    // 方向矢印アイコンをフェードイン/フェードアウトするように設定します $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }、 関数 （） {
        $('.pos').stop().fadeOut()
    })
    // クリックイベントを左方向アイコンにバインドします $('.left').on('click', function () {
        ボタン = true;
        クリーン（）;
        （インデックス == 0）の場合{
            インデックス = 5;
        } それ以外 {
             - 索引;
        }
        見せる（）;
    })
    // クリックイベントを右方向アイコンにバインドします $('.right').on('click', function () {
        ボタン = true;
        クリーン（）;
        （インデックス == 5）の場合{
            インデックス = 0;
        } それ以外 {
            ++インデックス;
        }
        見せる（）;
    })
    //インジケーター表示関数（クリックイベントをインジケーターにバインド）
    $('.dot li').on('click', 関数() {
        ボタン = true;
        今度は $(this).index() とします。
        if (now != インデックス) {
            クリーン（）;
            インデックス = 現在;
            見せる（）;
        }
    })
    //自動再生機能（タイマー）
    setInterval(関数() {
        if (!btn) {
            クリーン（）;
            （インデックス == 5）の場合{
                インデックス = 0;
            } それ以外 {
                ++インデックス;
            }
            見せる（）;
        } それ以外 {
            ボタン = false;
        }
​
    }, 5000)
​
    //前の画像とインジケーターをクリアする function clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('active');
    }
    //インジケーター関数に新しい画像とインジケーターを追加します show() {
        コンソールログ(インデックス);
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        コンソールログ($(`.content>ul>li:eq(${index})`))
        $(`.dot>ul>li:eq(${index})`).addClass('active');
​
    }
})

結果：


以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery はカルーセル マップを実装します。詳細な説明とサンプル コード
  • jQuery を使用して左右のカルーセル効果を記述する
  • jQueryはシームレスな左右のカルーセルを実装します
  • jQuery はカルーセル チャートを実装し、その原理の詳細を説明します。
  • jQueryプラグインスライドでシームレスなカルーセル効果を実現
  • jQueryは左右にスライドするカルーセルを実装します
  • jQuery アダプティブカルーセルプラグイン Swiper の使用例
  • JQuery と HTML+CSS を使用して、小さなドットと左右のボタンを備えたカルーセルを作成します。
  • jQueryで実装したシンプルなカルーセル機能【初心者向け】
  • jQuery をベースにフェードインとフェードアウト効果カルーセルを実装する

<<:  Ubuntu 20.04 LTSの詳細なインストール履歴

>>:  MySQLのスロークエリの詳細な説明

推薦する

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

phpstudy をインストールした後に MySQL を起動できない問題に対する完璧なソリューション (元のデータベースを削除する必要はなく、設定を変更する必要もなく、ポートを変更する必要もありません) 直接共存

今日、PHP を学習する場合、当然ながら、まず実行環境をインストールする必要があります。Phpstu...

MySQL 8.0 エラー サーバーがクライアントに不明な認証方法を要求しました 解決策

最新バージョンのMySQL 8.0.11をインストールした後、ユーザーを作成して認証します。認証され...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

dockerでlnmp環境を構築する方法

プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...

Vue3.0 + TypeScript + Vite初体験の詳しい説明

目次プロジェクトの作成プロジェクト構造メイン.jsアプリ.vue:設定コンポジションAPI参照反応的...

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

この記事は、Dockerにおけるcgroupの具体的な使用法を徹底的に理解するのに役立ちます。

目次cgroupとはcgroupの構成cgroupが提供する機能cgroup 内の CPU を制限す...

優れた Web UI ライブラリ/フレームワーク 10 選

1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...

mysql 複数テーブル接続削除関数の削除

単一のテーブルを削除する: tableName から columnName = value を削除し...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

CSS -webkit-box-orient: コンパイル後に垂直プロパティが失われる

1. 原因要件は 2 行を表示することであり、余分なテキストは 3 つのドットに置き換えられるため、...

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...