HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する

HTML、CSS、jQuery: フェードインおよびフェードアウト効果のあるカルーセル画像を作成する

インターネットの普及により、カルーセル画像が一般的になりました。 Webデザインにおける要素の一つ。複数の写真や製品情報を表示するために使用できるだけでなく、写真を動的に切り替えることでユーザーの視覚体験を向上させることもできます。この記事では、HTML、CSS、jQuery を使用して、フェードインおよびフェードアウト効果のあるカルーセルを作成する方法を紹介します。

まず、HTML 構造を作成する必要があります。 <div> コンテナを <code> タグに追加し、そのコンテナに <div id="slideshow"> などの一意の ID を設定します 。このコンテナでは、複数の <code><img class="active lazy" src="/static/imghw/default1.png" data-src="image1.jpg" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" > 要素を追加できます。各要素は、回転する画像を表します。フェードインおよびフェードアウト効果を実現するには、すべての画像を絶対位置に設定し、CSS を使用して他の画像を非表示にし、現在の画像のみを表示します。

以下は HTML コードの例です:

    <title>带有淡入淡出效果的轮播图</title>
    <style>
        #slideshow {
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        #slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #slideshow img.active {
            opacity: 1;
        }
    </style>


    <div id="slideshow">
        <img  class="active lazy" src="/static/imghw/default1.png" data-src="image1.jpg" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
        <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
        <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
    </div>

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

次に、CSS を使用してカルーセルのスタイルを設定する必要があります。このスタイルでは、まずカルーセル コンテナ #slideshow の相対位置を設定し、コンテナの幅、高さ、マージンを指定します。次に、カルーセル内の画像の絶対位置を設定し、上側と左側の位置が重なるように位置を 0 に設定します。また、画像の初期透明度を 0 に設定し、CSS トランジション効果を通じて透明度 0 から 1 へのトランジション アニメーションを実装しました。

デフォルトでは、カルーセルの最初の画像が表示され、他の画像は非表示になります。この効果を実現するには、active という CSS クラスを使用し、それを最初の画像に追加します。 CSS では、active クラスの透明度を 1 に設定しますが、他の画像の透明度は 0 のままです。

ここで、jQuery を使用して画像切り替え効果を実現する必要があります。 タグの最後に、次のコードを追加して、jQuery ライブラリとカスタム JavaScript スクリプトを導入します。

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

script.js ファイルには、カルーセル切り替え機能を実装するための JavaScript コードを記述する必要があります。以下にコード例を示します。

$(document).ready(function(){
    setInterval(function() {
        $('#slideshow img.active').fadeTo(1000, 0, function() {
            $(this).removeClass('active');

            if ($(this).next('img').length) {
                $(this).next('img').fadeTo(1000, 1).addClass('active');
            } else {
                $('#slideshow img:first').fadeTo(1000, 1).addClass('active');
            }
        });
    }, 3000);
});

上記のコードでは、setInterval 関数を使用してカルーセルの自動切り替え間隔を設定します。関数の 3000 は、3 秒ごとに自動的に画像を切り替えることを意味します。

関数内では、まず現在表示されている画像を検索し、fadeTo 関数を使用してその透明度を 1 から 0 にフェードします。アニメーションが完了したら、画像から active クラスを削除します。次に、次の画像が存在するかどうかを確認します。存在する場合は、その透明度を 0 から 1 に増加させ、active クラスをこの画像に追加します。存在しない場合は、カルーセルの最初の画像に active クラスを追加して再表示します。

上記の HTML、CSS、および JavaScript コードを使用して、フェードインおよびフェードアウト効果を持つカルーセルを正常に作成できました。 CSS スタイルと JavaScript コードを調整することで、さまざまなニーズを満たすために、より多くのスタイルとアニメーション効果を実現できます。このカルーセル画像を使用して、製品、プロモーション情報、または優れた作品を Web ページに表示し、ユーザーの視覚体験やアクティビティを向上させることができます。