JavaScript 实现图片切换功能

在网页设计中，图片切换功能能够为用户带来更加丰富的视觉体验，增强页面的交互性。使用 JavaScript 可以轻松实现这一实用功能。

HTML 结构是基础。我们需要创建一个容器来放置图片，通常使用 <div> 标签，并在其中插入多个 <img> 标签来展示不同的图片。例如：

<div id="image-container">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
</div>

这里给容器添加了一个 id 为 image-container，方便后续 JavaScript 选取操作。

接下来，进入关键的 JavaScript 部分。我们首先要获取所有的图片元素。可以使用 document.querySelectorAll 方法来实现：

const images = document.querySelectorAll('#image-container img');

然后，我们定义一个变量来记录当前显示的图片索引，初始值设为 0：

let currentIndex = 0;

为了实现图片的切换，我们可以创建一个函数。在函数中，先将所有图片的 display 样式设为 none，隐藏所有图片，再将当前索引对应的图片 display 设为 block，使其显示出来：

function showImage() {
    images.forEach(image => {
        image.style.display = 'none';
    });
    images[currentIndex].style.display = 'block';
}

为了实现自动切换图片，我们可以使用 setInterval 函数，每隔一定时间调用一次 showImage 函数：

setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage();
}, 3000); // 每 3 秒切换一次

这里 (currentIndex + 1) % images.length 确保索引不会超出图片数量范围，实现循环切换。

还可以添加手动切换的功能。比如添加左右箭头按钮，用户点击按钮实现图片切换。通过获取按钮元素，为其添加点击事件监听器：

<button id="prevButton">上一张</button>
<button id="nextButton">下一张</button>

const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');

prevButton.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage();
});

nextButton.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage();
});

通过上述步骤，我们就利用 JavaScript 成功实现了一个具备自动切换和手动切换功能的图片切换效果，极大地提升了网页的展示效果与用户体验。