ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する
HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する
- 王林オリジナル
- 2023-10-25 12:27:161370ブラウズ
HTML、CSS、jQuery: フェードインおよびフェードアウト効果のあるカルーセル画像を作成する
インターネットの普及により、カルーセル画像が一般的になりました。 Webデザインにおける要素の一つ。複数の写真や製品情報を表示するために使用できるだけでなく、写真を動的に切り替えることでユーザーの視覚体験を向上させることもできます。この記事では、HTML、CSS、jQuery を使用して、フェードインおよびフェードアウト効果のあるカルーセルを作成する方法を紹介します。
まず、HTML 構造を作成する必要があります。 <div> コンテナを <code> タグに追加し、そのコンテナに <div id="slideshow"> などの一意の ID を設定します 。このコンテナでは、複数の <code><img alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" > 要素を追加できます。各要素は、回転する画像を表します。フェードインおよびフェードアウト効果を実現するには、すべての画像を絶対位置に設定し、CSS を使用して他の画像を非表示にし、現在の画像のみを表示します。
以下は HTML コードの例です:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div id="slideshow">
<img src="image1.jpg" class="active" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
<img src="image2.jpg" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
<img src="image3.jpg" alt="HTML、CSS、jQuery: フェード効果のあるカルーセルを作成する" >
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>次に、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 ページに表示し、ユーザーの視覚体験やアクティビティを向上させることができます。
以上がHTML、CSS、jQuery: フェード効果のあるカルーセルを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。