垂直スクロール カルーセル効果を解析する HTML、CSS、JavaScript の実装
最新の Web 開発では、スクロール カルーセル効果は Web デザインにおける一般的なインタラクティブ要素の 1 つです。この記事では、HTML、CSS、JavaScript コードを詳しく分析して、シンプルで効率的な垂直スクロール カルーセル効果を実装します。このコードを通じて、jQuery ライブラリと CSS を使用して動的カルーセル コンポーネントを作成する方法を学ぶことができます。
1. HTMLの構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
#container {
height: 300px;
overflow: hidden;
position: relative;
}
#content {
position: absolute;
}
</style>
<script>
// JavaScript代码将在下文详细解释
</script>
</head>
<body>
<div id="container">
<div id="content">
<!-- 这里将生成的轮播内容动态添加 -->
</div>
</div>
</body>
</html>
HTML 構造では、jQuery ライブラリを導入し、#container コンテナを設定しました。このコンテナには、カルーセル コンテンツを保存する #content コンテナが含まれています。次に、コードの JavaScript 部分について詳しく説明します。
2. JavaScriptの実装
$(document).ready(function () {
// 生成30个样例的<div>并追加到#content中
for (var i = 1; i <= 30; i++) {
$('#content').append('<div>轮播' + i + '</div>');
}
// 获取内容的高度
var contentHeight = $('#content').height();
// 克隆内容，实现无缝循环
$('#content').append($('#content').clone());
// 使用animate实现向上滚动
function scrollUp() {
// 向上滚动动画
$('#content').animate({
top: -contentHeight
}, 10000, 'linear', function () {
// 动画完成后将top重置为0，实现无缝滚动
$(this).css('top', 0);
// 递归调用滚动函数，实现连续滚动
scrollUp();
});
}
// 开始滚动
scrollUp();
});
この JavaScript コードは、jQuery ライブラリを通じて DOM 要素を操作し、垂直スクロール カルーセル効果を実現します。具体的な手順は次のとおりです。
-
$(document).ready()を使用して、ページの読み込みが完了した後にコードが実行されるようにします。 -
は、
forループを通じて<div>の 30 個のサンプルを生成し、#contentコンテナに追加します。 -
スクロール距離の設定に使用されるコンテンツの高さを取得します。
-
cloneメソッドを使用してコンテンツのクローンを作成し、シームレスなループ スクロール効果を実現します。 -
上向きスクロールのアニメーション効果を実現するには
animateメソッドを使用し、アニメーションのイージング機能を指定するにはlinearを使用します。 -
アニメーションが完了したら、
topを 0 にリセットしてシームレスにスクロールします。 -
scrollUp関数を再帰的に呼び出して、連続スクロールを実現します。 -
コードデモ:
この例では、HTML、CSS、JavaScript を使用して、シンプルでスムーズな垂直スクロール カルーセル効果を作成する方法を示します。このコードを詳しく学ぶことで、jQuery ライブラリを使用して DOM 要素を操作し、アニメーション効果を実現することについてより深く理解できるようになります。