用js代码实现根据所给素材，实现如图所示的图片切换效果。当用户单击某幅缩略图时，在上面显示对应的大图，同时在标题“图片切换”后面添加“Image2”、“Image3”等

好的，以下是实现图片切换效果的代码：

HTML代码：

<div id="image-container">
  <h2>图片切换</h2>
  <img src="https://picsum.photos/300/200?random=1" alt="Image1" id="main-image">
  <div id="thumbnail-container">
    <img src="https://picsum.photos/50/50?random=2" alt="Image2" class="thumbnail">
    <img src="https://picsum.photos/50/50?random=3" alt="Image3" class="thumbnail">
    <img src="https://picsum.photos/50/50?random=4" alt="Image4" class="thumbnail">
    <img src="https://picsum.photos/50/50?random=5" alt="Image5" class="thumbnail">
  </div>
</div>

CSS代码：

#image-container {
  text-align: center;
}

#thumbnail-container {
  margin-top: 20px;
}

.thumbnail {
  margin: 0 10px;
  cursor: pointer;
}

JavaScript代码：

// 获取元素
const mainImage = document.getElementById('main-image');
const thumbnails = document.querySelectorAll('.thumbnail');
const title = document.querySelector('h2');

// 给缩略图添加点击事件
thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    // 修改主图片的src和alt属性
    mainImage.src = thumbnail.src.replace('50/50', '300/200');
    mainImage.alt = thumbnail.alt;
    // 修改标题
    title.textContent = `图片切换 - ${thumbnail.alt}`;
  });
});

这段代码实现了点击缩略图后，切换主图片和修改标题的效果。其中，通过querySelectorAll方法获取了所有class为thumbnail的缩略图元素，并且使用forEach方法给它们添加了点击事件。在点击事件中，修改了主图片的src和alt属性，同时也修改了标题。