js图片带数字切换

在JavaScript中实现图片带数字切换的功能，通常涉及到HTML、CSS和JavaScript的基本操作。以下是一个简单的示例，展示如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Switcher with Numbers</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-switcher">
        <img id="mainImage" src="image1.jpg" alt="Image 1">
        <div class="number-display">1</div>
    </div>
    <button onclick="prevImage()">Prev</button>
    <button onclick="nextImage()">Next</button>

    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.image-switcher {
    position: relative;
    width: 300px;
    height: 200px;
}

#mainImage {
    width: 100%;
    height: 100%;
}

.number-display {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

JavaScript部分（script.js）

const images = [
    { src: 'image1.jpg', number: 1 },
    { src: 'image2.jpg', number: 2 },
    { src: 'image3.jpg', number: 3 },
    // Add more images as needed
];

let currentIndex = 0;

function updateImage() {
    const imgElement = document.getElementById('mainImage');
    const numberDisplay = document.querySelector('.number-display');
    imgElement.src = images[currentIndex].src;
    numberDisplay.textContent = images[currentIndex].number;
}

function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    updateImage();
}

function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    updateImage();
}

// Initialize the first image
updateImage();

解释

HTML部分：定义了一个包含图片和数字显示的容器，以及两个按钮用于切换图片。
CSS部分：设置了图片容器的样式，并使数字显示在图片的右下角。
JavaScript部分：
- 定义了一个包含图片路径和对应数字的数组。
- 使用currentIndex来跟踪当前显示的图片索引。
- updateImage函数用于更新图片和数字显示。
- nextImage和prevImage函数用于切换到下一张或上一张图片，并更新显示。