ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptカルーセルチャートの実装方法
JavaScriptカルーセルチャートの実装方法
- WBOYオリジナル
- 2023-05-26 19:20:061839ブラウズ
フロントエンド開発テクノロジの継続的な発展により、JavaScript はフロントエンド開発に不可欠な部分になりました。 Web デザインでは、カルーセル画像は非常に一般的な表示方法であり、Web サイトで画像、テキスト、その他のコンテンツをより適切に表示するのに役立ちます。この記事では、JavaScript を使用して簡単なカルーセル グラフを実装する方法を紹介します。
1. HTML レイアウト
まず、カルーセルの HTML レイアウトを構築する必要があります。ここでは、以下に示すように、比較的単純な HTML と CSS メソッドを使用してカルーセル図コンテナーを作成します。
<div class="slider">
<ul class="slider-items">
<li class="slider-item"><img src="1.jpg"></li>
<li class="slider-item"><img src="2.jpg"></li>
<li class="slider-item"><img src="3.jpg"></li>
</ul>
</div> このうち、.slider はカルーセル図コンテナー を表します。 slider-items はカルーセル アイテム コンテナーを表し、.slider-item は単一のカルーセル アイテムを表します。 JavaScript でカルーセル項目の動きを制御するには、.slider-items の left プロパティを設定する必要があります。
2. JS によるカルーセルの実装
1. 要素の取得
カルーセル チャートを実装するには、まず操作する必要がある要素ノードを取得する必要があります。配列を定義しますitems は、カルーセル項目を保存し、querySelectorAll() メソッドを通じて slider-item クラスを取得するために使用されます。コードは次のとおりです:
var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];
for (var i = 0; i < sliderItems.length; i++) {
items.push(sliderItems[i]);
}2. 関連パラメータの設定
カルーセル チャートの実装プロセスでは、現在選択されているアイテム、カルーセル チャートの幅、トランジションの設定などの関連パラメータを設定する必要があります。最後のアイテムと最初のアイテムの間で待機します。コードは次のとおりです:
var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';3. カルーセル チャートの実装
次に、JavaScript を使用してカルーセル チャートを実装できます。具体的なプロセスは次のとおりです。
(1) startSlide 関数と slideLeft 関数を作成します。
-
startSlide(): カルーセルを開始するために使用されます。現在選択されている項目の次の項目が関数で定義されます。現在の項目が最後の項目の場合、次の項目が最初の項目として設定され、setInterval()によってカルーセル チャートが循環されます。 play; -
slideLeft(): 左に回転するために使用されます。animate()メソッドは、アニメーション遷移を実行し、カルーセル効果を完成させるために関数内で使用されます。
function startSlide() {
interval = setInterval(function () {
slideLeft();
}, pause);
}
function slideLeft() {
if (current === imgCount - 1) {
current = -1;
}
current++;
animate(sliderContainer, -width * current, animationSpeed);
} (2) animate 関数を作成してアニメーション効果を実現します。関数内では requestAnimationFrame() メソッドを使用してアニメーションのスムーズな遷移を実現し、より優れたカルーセル効果を実現します。
function animate(el, left, speed) {
var start = el.offsetLeft;
var destination = left;
var startTime = new Date().getTime();
var distance = destination - start;
function frame() {
var elapsedTime = new Date().getTime() - startTime;
var position = easeInOutQuart(elapsedTime, start, distance, speed);
el.style.left = position + 'px';
if (elapsedTime < speed) {
requestAnimationFrame(frame);
}
}
frame();
} (3) アニメーション効果を最適化するためのイージング関数 easeInOutQuart を作成します。
function easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
} (4) 最後に、JavaScript にカルーセル制御関数を追加する必要があります。ここでは、addEventListener() メソッドを通じて mouseenter および mouseleave イベントを追加しました。これらは、マウスが出入りするときにカルーセルを一時停止および開始するために使用されます。完全なコードは次のとおりです。
slider.addEventListener('mouseenter', function () {
clearInterval(interval);
});
slider.addEventListener('mouseleave', function () {
startSlide();
});
startSlide();3. 完全なコード
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript轮播图实现</title>
<style>
.slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider-items {
position: absolute;
top: 0;
left: 0;
list-style: none;
margin: 0;
padding: 0;
}
.slider-item {
display: inline-block;
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div class="slider">
<ul class="slider-items">
<li class="slider-item"><img src="1.jpg"></li>
<li class="slider-item"><img src="2.jpg"></li>
<li class="slider-item"><img src="3.jpg"></li>
</ul>
</div>
<script>
var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];
for (var i = 0; i < sliderItems.length; i++) {
items.push(sliderItems[i]);
}
var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';
function startSlide() {
interval = setInterval(function () {
slideLeft();
}, pause);
}
function slideLeft() {
if (current === imgCount - 1) {
current = -1;
}
current++;
animate(sliderContainer, -width * current, animationSpeed);
}
function animate(el, left, speed) {
var start = el.offsetLeft;
var destination = left;
var startTime = new Date().getTime();
var distance = destination - start;
function frame() {
var elapsedTime = new Date().getTime() - startTime;
var position = easeInOutQuart(elapsedTime, start, distance, speed);
el.style.left = position + 'px';
if (elapsedTime < speed) {
requestAnimationFrame(frame);
}
}
frame();
}
function easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1)
return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
slider.addEventListener('mouseenter', function () {
clearInterval(interval);
});
slider.addEventListener('mouseleave', function () {
startSlide();
});
startSlide();
</script>
</body>
</html>4. まとめ
この時点で、カルーセル チャートを実装するためのコードがすべて完成しました。 JavaScript。上記の例を通じて、JavaScript を使用してカルーセル チャートを実装する具体的なプロセスを理解し、シンプルでわかりやすいカルーセル チャートを実装し、カルーセル チャートを実装するための JavaScript の操作方法を習得することができます。この記事が、JavaScript フロントエンド開発技術をさらに習得するのに役立つことを願っています。
以上がJavaScriptカルーセルチャートの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。