创建互动照片墙：HTML、CSS 和 JavaScript 实战

本文链接：https://blog.csdn.net/winniezhang/article/details/140786312

在这个数字化时代，照片已经成为我们生活中不可或缺的一部分。无论是记录重要时刻，还是分享日常生活，我们都离不开照片。今天，我们将一起探索如何使用 HTML、CSS 和 JavaScript 创建一个互动的照片墙程序，让您可以轻松展示和浏览您珍藏的照片。
“C:\Users\86182\Downloads\photo-wall-program.html”

结果如下

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙程序</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            text-align: center;
        }
        #file-input {
            display: block;
            margin: 20px auto;
        }
        #view-toggle {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #photo-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        .tile-view {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tile-view img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            margin: 10px;
            border: 2px solid #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .carousel-view {
            display: none;
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }
        .carousel-view img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .carousel-view img.active {
            opacity: 1;
        }
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }
        #prev-button {
            left: 10px;
        }
        #next-button {
            right: 10px;
        }
    </style>
</head>
<body>
    <h1>照片墙程序</h1>
    <input type="file" id="file-input" multiple accept="image/*">
    <button id="view-toggle">切换视图</button>
    <div id="photo-container">
        <div class="tile-view"></div>
        <div class="carousel-view">
            <button id="prev-button" class="carousel-button">&#10094;</button>
            <button id="next-button" class="carousel-button">&#10095;</button>
        </div>
    </div>

    <script>
        const fileInput = document.getElementById('file-input');
        const viewToggle = document.getElementById('view-toggle');
        const photoContainer = document.getElementById('photo-container');
        const tileView = photoContainer.querySelector('.tile-view');
        const carouselView = photoContainer.querySelector('.carousel-view');
        const prevButton = document.getElementById('prev-button');
        const nextButton = document.getElementById('next-button');

        let currentView = 'tile';
        let currentIndex = 0;
        let photos = [];

        fileInput.addEventListener('change', handleFileSelect);
        viewToggle.addEventListener('click', toggleView);
        prevButton.addEventListener('click', showPreviousPhoto);
        nextButton.addEventListener('click', showNextPhoto);

        function handleFileSelect(event) {
            const files = event.target.files;
            photos = [];
            tileView.innerHTML = '';
            carouselView.innerHTML = '';
            carouselView.appendChild(prevButton);
            carouselView.appendChild(nextButton);

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        tileView.appendChild(img);
                        carouselView.insertBefore(img.cloneNode(), nextButton);
                        photos.push(img);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }

        function toggleView() {
            if (currentView === 'tile') {
                tileView.style.display = 'none';
                carouselView.style.display = 'block';
                currentView = 'carousel';
                showPhoto(currentIndex);
            } else {
                tileView.style.display = 'flex';
                carouselView.style.display = 'none';
                currentView = 'tile';
            }
        }

        function showPhoto(index) {
            const carouselPhotos = carouselView.querySelectorAll('img');
            carouselPhotos.forEach(photo => photo.classList.remove('active'));
            carouselPhotos[index].classList.add('active');
        }

        function showNextPhoto() {
            currentIndex = (currentIndex + 1) % photos.length;
            showPhoto(currentIndex);
        }

        function showPreviousPhoto() {
            currentIndex = (currentIndex - 1 + photos.length) % photos.length;
            showPhoto(currentIndex);
        }
    </script>
</body>
</html>

项目概述

我们的照片墙程序具有以下特点：

允许用户选择多张照片
以平铺方式显示所有照片
提供轮播视图，可以逐张浏览照片
响应式设计，适应不同屏幕尺寸

听起来很有趣，对吧？让我们一步步来看看如何实现这个程序。

HTML 结构

首先，我们需要创建基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙程序</title>
    <!-- CSS 样式将在这里 -->
</head>
<body>
    <h1>照片墙程序</h1>
    <input type="file" id="file-input" multiple accept="image/*">
    <button id="view-toggle">切换视图</button>
    <div id="photo-container">
        <div class="tile-view"></div>
        <div class="carousel-view">
            <button id="prev-button" class="carousel-button">&#10094;</button>
            <button id="next-button" class="carousel-button">&#10095;</button>
        </div>
    </div>
    <!-- JavaScript 代码将在这里 -->
</body>
</html>

这个结构包括了文件输入、视图切换按钮和两个不同的视图容器。

CSS 样式

接下来，我们需要添加一些 CSS 样式来美化我们的照片墙：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

/* 其他样式... */

.carousel-view img.active {
    opacity: 1;
}

这些样式为我们的照片墙提供了美观的布局和平滑的过渡效果。

JavaScript 功能

最后，我们需要添加 JavaScript 来使我们的照片墙具有交互性：

const fileInput = document.getElementById('file-input');
const viewToggle = document.getElementById('view-toggle');
const photoContainer = document.getElementById('photo-container');
// 其他变量声明...

fileInput.addEventListener('change', handleFileSelect);
viewToggle.addEventListener('click', toggleView);
// 其他事件监听器...

function handleFileSelect(event) {
    // 处理文件选择逻辑
}

function toggleView() {
    // 切换视图逻辑
}

// 其他函数...