html和js 实现当鼠标移到下面5个小图片上，小图片显示红色边框并且上面的图片位置显示与小图片一样内容的大图片，当鼠标离开小图片时，小图片边框不显示

可以通过以下 HTML 和 JavaScript 代码实现：

HTML 代码：

<div id="images">
  <img src="image1.jpg" data-src="large1.jpg">
  <img src="image2.jpg" data-src="large2.jpg">
  <img src="image3.jpg" data-src="large3.jpg">
  <img src="image4.jpg" data-src="large4.jpg">
  <img src="image5.jpg" data-src="large5.jpg">
</div>
<div id="large-image">
  <img src="">
</div>

JavaScript 代码：

// 获取小图片列表和大图片元素
const images = document.querySelectorAll('#images img');
const largeImage = document.querySelector('#large-image img');

// 遍历小图片列表，为每一个小图片添加鼠标移入和移出事件
images.forEach(img => {
  img.addEventListener('mouseover', () => {
    // 移入事件：添加红色边框和显示大图片
    img.style.border = '2px solid red';
    const largeSrc = img.dataset.src;
    largeImage.src = largeSrc;
  });
  
  img.addEventListener('mouseout', () => {
    // 移出事件：移除红色边框和隐藏大图片
    img.style.border = '';
    largeImage.src = '';
  });
});

解释一下代码：

1. 首先获取小图片列表和大图片元素。
2. 遍历小图片列表，为每一个小图片添加鼠标移入和移出事件。
3. 在鼠标移入事件中，添加红色边框和显示大图片。通过 `data-src` 属性获取大图片的地址，并将其赋值给大图片元素的 `src` 属性。
4. 在鼠标移出事件中，移除红色边框和隐藏大图片。将小图片元素的边框样式设为空字符串，将大图片元素的 `src` 属性设为空字符串。