JavaScript用户点击单击某副缩略图时，在上面显示对应的大图

好的，您可以使用以下代码实现该功能：

HTML代码：

<div class="thumbnail-wrapper">
  <img class="thumbnail" src="thumbnail.jpg" data-image="image.jpg">
</div>
<div class="title-wrapper">
  <h1>图片切换</h1>
  <p id="counter"></p>
</div>

JavaScript代码：

var thumbnails = document.querySelectorAll('.thumbnail');
var counter = document.getElementById('counter');
var count = 0;

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function() {
    var image = this.getAttribute('data-image');
    var thumbnailWrapper = this.parentElement;
    var img = document.createElement('img');
    img.src = image;
    thumbnailWrapper.appendChild(img);
    count++;
    counter.innerHTML = '已切换' + count + '张图片';
  });
}

代码解释：

1. 首先，使用`querySelectorAll()`方法获取所有的缩略图元素，和计数器元素。
2. 然后，使用`for`循环遍历所有的缩略图元素，并为每个元素添加`click`事件监听器。
3. 在事件监听器中，使用`getAttribute()`方法获取缩略图元素上`data-image`属性的值，即大图的路径。
4. 使用`document.createElement()`方法创建一个`img`元素，并将其`src`属性设置为大图的路径。
5. 将`img`元素添加到缩略图元素的父元素中，以在缩略图上方显示大图。
6. 计数器加1，并将计数器元素的内容更新为已切换的图片数量。

注意事项：

1. 为了确保大图不会重复添加到缩略图上方，请在添加大图前先检查该缩略图上是否已经有大图。
2. 如果您的网站需要支持更多的图片切换功能，可以将以上代码封装成一个函数，并在需要的地方调用。