jQuery は呼吸カルーセルを実装します

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

html

<div class="all" id="box">
        <div class="screen">
            <ul>
                <li><img src="images/01.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/02.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/03.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/04.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/05.jpg" 幅="500" 高さ="200" /></li>
            </ul>
            <オル>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
</div>

CS

* {
            パディング: 0;
            マージン: 0;
            リストスタイル: なし;
            境界線: 0;
        }

        。全て {
            幅: 500ピクセル;
            高さ: 200px;
            パディング: 7px;
            境界線: 1px 実線 #ccc;
            マージン: 100px 自動;
            位置: 相対的;
        }

        .スクリーン{
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            位置: 相対的;
        }

        .screen li {
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            フロート: 左;
        }

        .screen ul {
            位置: 絶対;
            左: 0;
            上: 0px;
            幅: 2500ピクセル;
        }

        .all ol {
            位置: 絶対;
            右: 10px;
            下: 10px;
            行の高さ: 20px;
            テキスト配置: 中央;
        }

        .all ol li {
            フロート: 左;
            幅: 20px;
            高さ: 20px;
            背景: #fff;
            境界線: 1px 実線 #ccc;
            左マージン: 10px;
            カーソル: ポインタ;
        }

        .all ol li.current {
            背景: 黄色;
        }

        #arr {
            表示: なし;
        }

        #arr スパン {
            幅: 40px;
            高さ: 40px;
            位置: 絶対;
            左: 5px;
            上位: 50%;
            上マージン: -20px;
            背景: #000;
            カーソル: ポインタ;
            行の高さ: 40px;
            テキスト配置: 中央;
            フォントの太さ: 太字;
            フォントファミリ: '太字';
            フォントサイズ: 30px;
            色: #fff;
            不透明度: 0.3;
            境界線: 1px 実線 #fff;
        }

        #arr #right {
            右: 5px;
            左: 自動;
        }

JSコード

$(関数() {
        var インデックス = 0;
        //マウスが入る $('#box').mouseenter(function(){
            $('#arr').表示();
        })
        //マウスを$('#box')から出します。mouseleave(function(){
            $('#arr').hide();
        })
        $('#right').click(function(){
            if(index == $('.screen>ul>li').length-1){ //最後のもの index = 0;
            }それ以外 {
               インデックス++; 
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        $('#left').click(function(){
            if(index == 0){ //最初のインデックス = $('.screen>ul>li').length-1;
            }それ以外 {
                索引 - ;
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        //ページ番号をクリックするとカルーセル画像が再生されます$('.screen>ol>li').click(function(){
            インデックス = $(this).index()
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
 });

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

以下もご興味があるかもしれません:
  • ブリージングカルーセルを実装するネイティブJS
  • jQuery で呼吸カルーセル効果を実現

<<:  Docker で Springboot プロジェクトを実行する実装

>>:  XHTML 入門チュートリアル: テーブルタグの応用

推薦する

Vueはel-tree遅延読み込みを使用して、追加、削除、変更、クエリ機能を実装します。

Vue のツリー表示については、プロジェクトが使用されています: エフェクト ダイアグラムがツリー...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...

ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法

テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...

nginx のロードバランシングとリバースプロキシの説明

目次負荷分散負荷分散分類1. DNS 負荷分散2. IP負荷分散3. リンク層の負荷分散4. ハイブ...

MySQLデータ移行方法とツールの分析

この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...

Linux システムでデプロイメント プロジェクトを設定する方法

1. ファイアウォールの設定を変更し、対応するポートを開きますLinux システムのファイアウォール...

Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...

Webフロントエンド開発におけるエラーを見つけるための基本的な考え方

WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...

Tencent Cloudでhive3.1.2を構築する方法を教えます

環境の準備操作を開始する前に、hadoop バージョンがインストールされていることを確認してください...

HTMLからReactを実装する方法を教えます

ReactとはReact は、効率的で高速なユーザー インターフェイスを構築するためのシンプルな J...

Vueの子コンポーネントと親コンポーネントの詳細な分析

目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....