ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery を使用して自動スクロール カルーセルを作成する方法
HTML、CSS、jQuery を使用して自動スクロール カルーセルを作成する方法
- WBOYオリジナル
- 2023-10-24 08:37:581420ブラウズ
HTML、CSS、jQuery を使用して自動的にスクロールするカルーセルを作成する方法
インターネットの発展に伴い、カルーセルは Web デザインで一般的かつ必要なものになりました。準備の要素。 Web サイトのホームページや製品表示ページでカルーセルを使用すると、複数の画像やコンテンツを鮮やかに表示してユーザーの注意を引き、ユーザー エクスペリエンスを向上させることができます。この記事では、HTML、CSS、jQuery を使用して自動スクロールするカルーセル チャートを作成する方法と具体的なコード例を紹介し、初心者の参考になれば幸いです。
まず、HTML ファイル内のカルーセルの基本構造を確立する必要があります。以下は簡単な HTML コードの例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动滚动轮播图</title>
<style>
.slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider .slides {
width: 300%;
height: 100%;
display: flex;
}
.slider .slides .slide {
width: 33.33%;
height: 100%;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide">
<img src="slide1.jpg" alt="Slide 1">
</div>
<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
</div>
<div class="slide">
<img src="slide3.jpg" alt="Slide 3">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html> 上記のコードでは、.slider という名前のカルーセル コンテナーを作成し、コンテナーの幅と高さを 600px ～ 400px に設定しました。 overflow: hidden を設定して、コンテナー サイズを超えるコンテンツを非表示にします。 .slides クラスでは、カルーセル画像のコンテナ幅が 300% (つまり、各画像の幅の 3 倍) に設定されます。 # クラスから 33.33% 3 つの画像を一列に均等に配置します。 次に、jQuery を使用してカルーセルの自動スクロール効果を実現する必要があります。コードは、
という名前の外部 JavaScript ファイルに記述します (HTML ファイル内の <script></script> タグに記述することもできます)。簡単な jQuery コードの例を次に示します。 <pre class='brush:javascript;toolbar:false;'>$(document).ready(function() {
var slideCount = $('.slide').length;
var slideWidth = $('.slide').width();
var slideHeight = $('.slide').height();
var slideContainerWidth = slideCount * slideWidth;
$('.slides').css({ width: slideContainerWidth, marginLeft: -slideWidth });
function slideNext() {
$('.slides').animate({
left: -slideWidth
}, 1000, function() {
$('.slide:first-child').appendTo('.slides');
$('.slides').css('left', '');
});
}
setInterval(slideNext, 2000);
});</pre> 上記のコードでは、最初に
メソッドを使用して、ページが作成された後にコードが実行されることを確認します。ロードされています。次に、カルーセル画像の総数、画像の幅、画像の高さ、カルーセル画像コンテナーの幅を取得します。 .slides の幅を slideContainerWidth に設定し、その marginLeft プロパティを -slideWidth に設定することで、最初の画像の一部をコンテナーから非表示にします。 次に、カルーセルのスクロール効果を実装するために、
という名前の関数を定義します。 .animate() メソッドを使用して、.slides を slideWidth 距離だけ左に 1000 ミリ秒 (つまり 1 秒) 移動します。アニメーションが完了したら、最初の画像を .slides の最後に移動し、.slides の左側のプロパティを空にリセットします。これにより、画像のシームレスなスクロール効果が実現します。 最後に、
関数を使用して slideNext() 関数をループし、2 秒ごとにスクロールします。 上記のコードを使用すると、自動スクロール効果のあるカルーセル チャートを作成して実行できます。必要に応じて、カルーセル コンテナーのサイズ、画像の数、スクロール速度をカスタマイズできます。この記事が、HTML、CSS、jQuery を使用してカルーセルを作成する方法を学ぶのに役立つことを願っています。
以上がHTML、CSS、jQuery を使用して自動スクロール カルーセルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。