ホームページ > 記事 > ウェブフロントエンド > JavaScriptカルーセルチャートの作り方
JavaScriptカルーセルチャートの作り方
- 王林オリジナル
- 2023-05-09 09:22:061144ブラウズ
JavaScript カルーセルを作成するにはどうすればよいですか?
Web フロントエンド開発の発展に伴い、カルーセル画像はほとんどの Web サイトやアプリケーションの共通コンポーネントの 1 つになりました。しかし、フロントエンド開発が初めての多くの友人は、JavaScript カルーセル チャートをどうやって作成するのかと尋ねると思います。
この記事では、JavaScript を使用してカルーセル グラフを作成する方法を紹介し、カルーセル グラフを実装するための基本原則と一般的なテクノロジを徐々に理解できるようにします。
1. カルーセル チャートの基本原理
カルーセル チャートは、その名の通り、ループ再生できる画像群であり、自動ループまたは手動切り替えを実現します。 JavaScript を使用して、ユーザーが複数の画像やコンテンツを閲覧できるようにします。
カルーセル チャートの基本原理は、HTML 構造と JavaScript ロジックの 2 つの部分に分かれています。
HTML 構造:
HTML 構造はカルーセル グラフの基礎であり、その構造はおおよそ次のとおりです:
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
<li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
<li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
<li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
<li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
</ul>
</div>このうち、.carouselはカルーセル チャート コンテナー、.carousel-list は画像リスト コンテナー、.carousel-item は個々の画像のコンテナーです。
JavaScript ロジック:
JavaScript ロジックは、通常は次の方法でカルーセル チャートのコアを実装します:
1. カルーセル チャートのページ要素を取得し、JavaScript コードを使用します。 HTML の .carousel 要素を選択します。
var carousel = document.querySelector('.carousel');2. 画像リスト コンテナと個別画像コンテナの取得
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');3. カルーセル画像の幅の取得
var itemWidth = items[0].offsetWidth;
4. 切り替え間隔と設定タイミング 5. 自動再生と手動切り替えを設定する、
var delay = 3000; var interval;
2. シンプルなカルーセル チャートを実装する
これで、カルーセル チャートの基本原理を理解し、カルーセル チャートの基本的な効果を達成しました。コードによるカルーセル チャート。以下では、この効果に基づいて単純なカルーセル チャートを実装します。
HTML 構造:
function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
if(left <= itemWidth - list.offsetWidth) {
list.style.left = "0px";
} else {
list.style.left = left + 'px';
}
}, delay);
}
function stopCarousel() {
clearInterval(interval);
}JavaScript コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Carousel</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
<li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
<li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
<li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>CSS コード:
var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth;
var delay = 3000;
var interval;
// 自动播放
function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
if(left <= itemWidth - list.offsetWidth) {
list.style.left = "0px";
} else {
list.style.left = left + 'px';
}
}, delay);
}
// 手动切换
function stopCarousel() {
clearInterval(interval);
}
// 启动轮播
startCarousel();3. 複数の効果を実現するカルーセル画像
#上記の例を通じて、簡単なカルーセル チャートの作成方法を学びました。ただし、通常、カルーセル画像には上記の効果だけではなく、JavaScript を使用してより実用的なカルーセル画像効果を実現することもできます。 1. イージング効果イージング効果とは、各映像の切り替わりの速度を速い速度から遅い速度に変える効果です。 JavaScript を使用すると、通常次のように記述できます:.carousel {
position: relative;
overflow: hidden;
width: 400px; /* 轮播图容器的宽度 */
height: 300px; /* 轮播图容器的高度 */
}
.carousel-list {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: ${(items.length * 100)}%;
}
.carousel-item {
float: left;
width: calc(100% / ${(items.length)});
}
.carousel-item img {
display: block;
width: 100%;
height: auto;
}2. レスポンシブ レイアウト レスポンシブ Web デザインは、現代のフロントエンド デザインでは常識です。画面サイズ、Web レイアウトによりよく適応するには、追加の調整と最適化を行う必要があります。 function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
var startTime = Date.now();
var easing = function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
};
var animate = function() {
var time = Date.now() - startTime;
var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
if(time <= delay) {
list.style.left = easingLeft + 'px';
requestAnimationFrame(animate);
} else {
list.style.left = -itemWidth + 'px';
list.appendChild(items[0]);
}
};
requestAnimationFrame(animate);
}, delay);
} その中で、 vw
ユニットはビューポートの幅のパーセンテージとして長さを指定でき、画面サイズがどのように変化してもカルーセルは応答性の高いレイアウトを維持します。4. 概要
以上がJavaScriptカルーセルチャートの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。