ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用した Web ギャラリーの開発
JavaScript を使用した Web ギャラリーの開発
- PHPzオリジナル
- 2023-08-09 20:10:431124ブラウズ
JavaScript を使用した Web ギャラリーの開発
インターネットが発展し続けるにつれて、Web デザインはより洗練され、インタラクティブになってきました。その中でも、ギャラリーは一般的な Web デザイン要素であり、複数の画像を表示し、参照および切り替え機能を提供できます。この記事では、JavaScript を使用して簡単な Web ギャラリーを開発する方法を説明し、コード例を示します。
まず、いくつかの画像リソースを準備する必要があります。プロジェクト フォルダーに「images」というフォルダーを作成し、そこにすべての写真を入れることができます。ここでは例として 5 枚の写真を使用します。画像リソースの準備ができたら、JavaScript コードの記述を開始します。
- HTML 構造の作成
最初に、画像を表示し、切り替え機能を提供するための HTML 構造を作成する必要があります。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>网页画廊</title>
<style>
.gallery {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.gallery img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
.controls button {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="gallery">
<img id="image" src="images/1.jpg" alt="image">
</div>
<div class="controls">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<script src="script.js"></script>
</body>
</html>上記のコードでは、画像を収容するために "gallery" クラスを持つ div を使用し、画像を表示するために ID "image" を持つ img 要素を使用します。 。以下は「controls」クラスの div で、前後の画像に切り替えるための 2 つのボタンが含まれています。このようにして、基本的な HTML 構造を作成します。
- JavaScript ロジックの作成
次に、画像切り替え機能を実装するための JavaScript コードを作成する必要があります。プロジェクト フォルダーに「script.js」という名前のファイルを作成し、次のコードを記述します。
// 获取元素
const image = document.getElementById("image");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
// 图片列表
const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
// 当前显示的图片索引
let currentIndex = 0;
// 切换到上一张图片
prevBtn.addEventListener("click", () => {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
image.src = images[currentIndex];
});
// 切换到下一张图片
nextBtn.addEventListener("click", () => {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
image.src = images[currentIndex];
});上記のコードでは、まず getElementById メソッドを通じて操作する必要がある要素を取得します。 img要素と2つのボタンです。次に、すべての画像のパスを含む配列 image を定義し、現在表示されている画像のインデックスを 0 に初期化します。
次に、addEventListener メソッドを使用して、クリック イベント リスナーを prevBtn ボタンに追加します。ボタンをクリックすると、currentIndex が 1 減分され、インデックスが 0 未満かどうかがチェックされます。その場合は、currentIndex を画像配列の最後の要素のインデックス値に設定します。つまり、ループ切り替えを実装します。最後に、img 要素の src 属性を現在のインデックスに対応する画像パスに設定します。
次に、同様のクリック イベント リスナーを nextBtn ボタンに追加します。ボタンをクリックすると、currentIndex が 1 ずつ増加し、インデックスが画像配列の長さを超えているかどうかがチェックされます。その場合は、currentIndex を 0 に設定してループ スイッチングを実装します。最後に、img 要素の src 属性も現在のインデックスに対応する画像パスに設定します。
- Web ページの実行
上記の手順を完了したら、ファイルを保存し、ブラウザで HTML ファイルを開きます。これで、「前へ」ボタンと「次へ」ボタンを使用して、表示される画像を切り替えることができます。ボタンをクリックして、写真が正常に切り替わるかどうかを確認してください。
概要
上記は、JavaScript を使用して Web ギャラリーを開発する簡単な例です。 img要素のsrc属性を動的に変更することで画像切り替え機能を実装できます。これは単なる基本的な例であり、画像のプリロードやズームなどを追加するなど、さらに拡張することができます。この記事があなたにインスピレーションをもたらすことを願っています。また、Web デザインでより良い結果が得られることを願っています。
以上がJavaScript を使用した Web ギャラリーの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。