使用JavaScript开发网页画廊-js教程-PHP中文网

使用JavaScript开发网页画廊

PHPz

发布： 2023-08-09 20:10:43

原创

1137 人浏览过

使用JavaScript开发网页画廊

随着互联网的不断发展，网页设计也变得更加精致和交互。其中，画廊是一个常见的网页设计元素，它能够展示多张图片，并提供浏览和切换的功能。本文将介绍如何使用JavaScript开发一个简单的网页画廊，并提供代码示例。

首先，我们需要准备一些图片资源。可以在项目文件夹中创建一个名为"images"的文件夹，并将所有图片放在其中。这里我们使用五张图片作为示例。图片资源准备好后，我们开始编写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，其中包含两个按钮，分别用于切换上一张和下一张图片。这样我们就创建了基本的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元素和两个按钮。然后，我们定义了一个包含所有图片路径的数组images，并初始化当前显示图片的索引为0。

接下来，通过addEventListener方法给prevBtn按钮添加一个点击事件的监听器。当按钮被点击时，currentIndex减1，并检查索引是否小于0。如果是，将currentIndex设置为images数组的最后一个元素的索引值，即实现循环切换。最后，将img元素的src属性设置为当前索引对应的图片路径。

接着，我们给nextBtn按钮添加一个类似的点击事件监听器。当按钮被点击时，currentIndex加1，并检查索引是否超出images数组的长度。如果是，将currentIndex设置为0，实现循环切换。最后，同样将img元素的src属性设置为当前索引对应的图片路径。