jQuery で呼吸カルーセル効果を実現

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

おそらく次のような考えでしょう:

ブリージング カルーセルは、画像がフェードインおよびフェードアウトするカルーセルです。
ul を div に格納します (相対位置を設定します)。li には float: left は必要なく、絶対位置を設定するだけです。左:0、上:0。
このとき、すべての写真の後に false 0 を追加する必要はありません。
div には、左ボタンと右ボタン、およびその下の小さなドットも含まれます。これらは、絶対位置指定によって適切な位置に配置できます。
インデックスを 0 に設定します。右ボタンをクリックすると、現在の画像がフェードアウトし、インデックス ++ になります。画像が最後の場合、インデックスは 0 に設定され、新しい画像がフェードインします。下の小さな点は色に対応しています。
左ボタンのアイデアもほぼ同じです。
下の小さな画像をクリックした際に、クリックしたインデックスが現在表示されているインデックスと同じであれば、何もする必要はありません。
他のドットをクリックすると、古い画像がフェードアウトし、現在のドットのインデックスがグローバル変数インデックスに割り当てられ、新しい画像がフェードインします。
クリックしたドットの色は変わりますが、その兄弟要素は元の色のままです。

プログラム:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<スタイル>
    *{
        マージン:0;
        パディング:0;
    }
    。大きい{
        幅:560ピクセル;
        高さ:300px;
        位置: 相対的;
        マージン:200px 自動;
        border:10px 赤一色;
    }
    .big .move{
        幅:5600ピクセル;
        高さ:300px;
        位置: 絶対;
        左:0;
        トップ:0;
    }
    .big .move li{
        /*float: 左;*/
        リストスタイル: なし;
        表示: なし;
        位置: 絶対;
        トップ:0;
        左:0;
    }
    .big ul .first{
        表示: ブロック;
    }
    画像{
        幅:560ピクセル;
        高さ:300px;
    }

    .btn div{
        幅:40px;
        高さ:60px;
        背景: 赤;
        位置: 絶対;
        上位:50%;
        上マージン:-30px;
    }
    .rightbtn{
        右:0;
    }

    。丸{
        位置: 絶対;
        左:0px;
        下:0px;
        幅:200px;
        高さ:30px;

    }
    .circle ul{
        /*オーバーフロー: 非表示;*/
        リストスタイル: なし;
        フロート: 左;
    }
    .circleUl li{
        背景: 白;
        フロート: 左;
        右マージン:10px;

        幅:20px;
        高さ:20px;
        境界線の半径:50%;
    }


</スタイル>
<本文>
<div class="big">

    <ul class="move">
        <li class="first"> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>

<スクリプト>
// 最初のドットを赤に設定します $(".circleUl li").eq(0).css("background","re​​d");

    var インデックス = 0;
    $(".leftbtn").click(関数(){
// 古い画像をフェードアウトします $(".move li").eq(index).fadeOut(400);
        索引 - ;
      if(インデックス<0){
          インデックス = 3;
      }
// 新しい画像がフェードインします $(".move li").eq(index).fadeIn(400);
// インデックスに対応する小さなドットの色を変更します$(".circleUl li").eq(index).css("background","re​​d").siblings().css("background","white");
    });


    $(".rightbtn").click(関数(){
        $(".move li").eq(index).fadeOut(400);
        インデックス++;
        コンソールログ(インデックス);
        if(インデックス == 4){
            インデックス = 0;
        }
        $(".move li").eq(index).fadeIn(400);
        $(".circleUl li").eq(index).css("background","re​​d").siblings().css("background","white");
    });


// 小さなドットのクリックイベント $(".circleUl li").click(function(){
// 最初の画像がすでに表示されているときに最初のドットをもう一度クリックしても何も起こりません if(index == $(this).index()) return;

// 古い画像がフェードアウトします $(".move li").eq(index).fadeOut(400);

// ドットをクリックし、そのドットのインデックスをグローバル変数インデックスに割り当てます (グローバル変数インデックスを更新します)
        インデックス = $(this).index();

        // 新しい画像がフェードインします $(".move li").eq(index).fadeIn(400);
// 小さなドットの色が変わります$(this).css("background","re​​d").siblings().css("background","white");



    })
</スクリプト>

</本文>
</html>

実行結果:

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

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

<<:  XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション

>>:  Docker に MySQL と Redis をインストールする方法

推薦する

Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方

レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

MySQL 5.7.9 シャットダウン構文例の詳細な説明

mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...

HTML チュートリアル: title 属性と alt 属性

XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

Element UI を使用してページにページング ナビゲーション バーを追加する方法

必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...

Vueベースのビデオプレーヤーの実装例

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...

MySQLは文字列関数のSQL文をインターセプトします

1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

VueはEchartsを使用して3次元棒グラフを実装します

この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...

Linux の文字端末でマウスを使って赤い四角形を移動する方法

すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...