javascript实现点击图片切换功能

下面是详细讲解“JavaScript实现点击图片切换功能”的完整攻略。

1、HTML结构

如下所示的HTML结构中，我们将用JavaScript来实现当用户点击左侧的小图时，右侧显示对应的大图。

<div>
  <div class="thumbnails">
    <img src="small-1.jpg" alt="small-1">
    <img src="small-2.jpg" alt="small-2">
    <img src="small-3.jpg" alt="small-3">
    <img src="small-4.jpg" alt="small-4">
    <img src="small-5.jpg" alt="small-5">
  </div>
  <div class="viewer">
    <img src="large-default.jpg" alt="large-default">
  </div>
</div>

2、CSS样式

我们需要用CSS来设置一些样式，让页面呈现我们期望的形态。下面是一个简单的CSS，你可以选择按照自己的喜好进行修改。

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thumbnails img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}

.viewer img {
  width: 100%;
}

3、JavaScript实现

目前为止，页面的结构和样式我们都设置好了，接下来我们要用JavaScript来实现点击图片切换的功能。

首先，我们需要选中HTML中的元素。我们可以使用querySelector方法来选中元素。

let thumbnailImgs = document.querySelectorAll('.thumbnails img');
let viewerImg = document.querySelector('.viewer img');

然后，我们需要遍历所有小图，为它们分别添加点击事件。当小图被点击时，大图的src属性应该被修改为对应的src。

thumbnailImgs.forEach(thumbnailImg => {
  thumbnailImg.addEventListener('click', function() {
    viewerImg.src = this.src.replace('small', 'large');
  });
});

这里使用了replace方法将小图的文件名替换为大图的文件名。当然，为了实现这一点，我们假设小图和大图的文件名都是相同的，只是大小不同。如果这个假设不成立，那我们就需要另寻他法了。

至此，我们已经完成了JavaScript代码的编写。完整代码如下：

let thumbnailImgs = document.querySelectorAll('.thumbnails img');
let viewerImg = document.querySelector('.viewer img');

thumbnailImgs.forEach(thumbnailImg => {
  thumbnailImg.addEventListener('click', function() {
    viewerImg.src = this.src.replace('small', 'large');
  });
});

4、示例说明

下面，我提供两个不同的示例，帮助你更好地理解这个功能。

第一个示例是使用未压缩的图片。在这个示例中，我们可以清晰地看到图片切换的效果。

<div>
  <div class="thumbnails">
    <img src="https://via.placeholder.com/100x100.png?text=Small%201" alt="small-1">
    <img src="https://via.placeholder.com/100x100.png?text=Small%202" alt="small-2">
    <img src="https://via.placeholder.com/100x100.png?text=Small%203" alt="small-3">
    <img src="https://via.placeholder.com/100x100.png?text=Small%204" alt="small-4">
    <img src="https://via.placeholder.com/100x100.png?text=Small%205" alt="small-5">
  </div>
  <div class="viewer">
    <img src="https://via.placeholder.com/500x500.png?text=Large%20Default" alt="large-default">
  </div>
</div>

第二个示例是使用压缩过的图片。在这个示例中，我们可以测试在图片大小较大或网络环境较差的情况下，图片切换的效果。

<div>
  <div class="thumbnails">
    <img src="https://via.placeholder.com/100x100.png?text=Small%201" alt="small-1">
    <img src="https://via.placeholder.com/100x100.png?text=Small%202" alt="small-2">
    <img src="https://via.placeholder.com/100x100.png?text=Small%203" alt="small-3">
    <img src="https://via.placeholder.com/100x100.png?text=Small%204" alt="small-4">
    <img src="https://via.placeholder.com/100x100.png?text=Small%205" alt="small-5">
  </div>
  <div class="viewer">
    <img src="https://via.placeholder.com/500x500.png?text=Large%20Default&compress=true" alt="large-default">
  </div>
</div>

以上就是完整的攻略了。希望对你有所帮助！