jQuery を使用してカルーセル効果を実装する

jQuery を使用してカルーセル効果を実装する

本日ご紹介するのは、jQuery を使用してシンプルなカルーセルを実装する方法です。実装の原則は次のとおりです。

1. エリアの幅と高さを設定します。エリアがこの部分を超えると、非表示の

2. 画像サイズを300に設定し、インデックスは0から始まります。

3. 右側のボタンをクリックしたら、クリックしたボタンのインデックスに1を加算する必要があります。画像のサイズ+pxに乗じたインデックスに1を加算します。

4.スライドするときにアニメーション効果を追加すると素晴らしいものになります

5. 右側の効果は左側と同じです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カルーセル画像</title>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <スタイル タイプ="text/css">
     *{
      パディング: 0;
      マージン: 0;
     }
     .uli{
   幅: 300ピクセル;
      高さ: 300px;
   ディスプレイ: フレックス;
   オーバーフロー: 非表示;
     }
     .uli li>画像{
      位置: 相対的;
      左: 0px;
      上: 0px;
      高さ: 300px;
     }
     .uli li{
      幅: 300ピクセル;
      高さ: 300px;
      リストスタイル:なし;
     }
     .a1{
      位置: 絶対;
      上: 100px;
      左: 0;
      カーソル: ポインタ;
      フォントサイズ: 50px
     }
     .a2{
      位置: 絶対;
      上: 100px;
      左: 260ピクセル;
      カーソル: ポインタ;
      フォントサイズ: 50px
     }
    </スタイル>
</head>
<本文>
 <!-- ul li 内の写真とドリンクの数を設定します -->
    <ul class="uli">
     <li><img src="./img/大冰黒茶.png" alt=""></li>
     <li><img src="./img/Big Honey Green Tea.png" alt=""></li>
     <li><img src="./img/大龙井绿茶.png" alt=""></li>
    </ul>
 <!-- 2 つの div 内の span は、右側の付箋と左側のラベルのクリック イベントを制御します -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2"> </span>
    </div>
    <script type="text/javascript">
 // エントリ関数を記述する $(function(){
   // 画像サイズを設定します var img = 300;
   // インデックスを0に設定する 
      var インデックス = 0;
   // 写真の数の長さを設定します。var option = $('.uli>li img').length;
      // 左の部分は $('.a2').click(function(){ で始まります
    // 次にイベントをクリックしてコールバック関数 left() を実行します
      })
   // 関数名 lest 
      関数 left(){
    // インデックスの値は 0 です。画像の長さより小さい場合は、++ オプションを実行してマイナス 1 を実行します。それ以外の場合は空白ページになります。if (index < option-1) {
                     インデックス++
                }それ以外 {
                 インデックス = 0
                }
                動く()
      }
      // 左部分が終了 // 右部分が始まります $('.a1').click(function(){
    // 次にイベントをクリックしてコールバック関数を実行します right()
      })
      関数 right(){
    // インデックスの値は 0 です。画像の長さより大きい場合は、次のように実行されます。 
       (インデックス>0)の場合{
        索引 - 
       }それ以外 {
        インデックス = オプション-1
       }
       動く()
      }
   // 右関数と左関数には移動関数があり、インデックスをクリックすると、時間の経過とともに画像の数が 500 個ずつスライドします。 function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </スクリプト>
</本文>
</html>

これが上記のコードです。小さな例で試してみることができます。

レンダリングを見てみましょう。

ビデオは再生できず、画像のみを見ることができます。

これが現状です。

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

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

<<:  Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明

>>:  インデックスとテーブルリターンをカバーするMySQLの使い方

推薦する

Linux デスクトップ用に Openbox を設定する方法 (推奨)

この記事は、「24 Days of Linux Desktop」の特別シリーズの一部です。 Open...

WeChatアプレットでラッキーホイールゲームを実装する方法

ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...

MySQLでデータベースデータ保存ディレクトリを変更する方法

序文MySQL データベースのデフォルトのデータベース ファイルは /var/lib/mysql に...

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...

Linux CDの意味と使い方

Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...

3つのDocker Nginxログの処理の詳細な説明

社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

Linux仮想マシンをWiFiに接続する方法

生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

Windows 2016 Server セキュリティ設定

目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...