HTML滑过小图显示大图,jquery实现鼠标滑过多张小图查看大图的方

可以使用jQuery的hover()方法和data属性来实现鼠标滑过多张小图查看对应的大图。

首先，需要在HTML中添加多个包含小图和大图链接的HTML结构，如下所示：

<div class="image-container">
  <img src="small-image-1.jpg" alt="Small Image 1" data-large-image="large-image-1.jpg">
  <a href="#" class="large-image-link">View Large Image</a>
</div>

<div class="image-container">
  <img src="small-image-2.jpg" alt="Small Image 2" data-large-image="large-image-2.jpg">
  <a href="#" class="large-image-link">View Large Image</a>
</div>

<!-- 添加更多的image-container -->

注意，在每个小图中，我们使用data-large-image属性来指定对应的大图链接。

然后，在jQuery中，使用hover()方法来为每个小图添加鼠标滑过事件，并根据data属性来显示对应的大图链接：

$('.image-container').hover(function() {
  // 鼠标滑过时显示对应的大图链接
  var largeImage = $(this).find('img').data('large-image');
  $(this).find('.large-image-link').attr('href', largeImage).fadeIn();
}, function() {
  // 鼠标移出时隐藏大图链接
  $(this).find('.large-image-link').fadeOut();
});

上面的代码中，我们使用data()方法来获取每个小图对应的大图链接，并使用attr()方法来设置大图链接的href属性。然后，使用fadeIn()和fadeOut()方法来显示和隐藏大图链接。

最后，使用CSS样式来设置大图链接的位置和样式。

.image-container {
  position: relative;
}

.large-image-link {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

上面的代码中，我们将大图链接设置为绝对定位，并将其放置在小图的右侧。然后，使用padding、background-color和border属性来设置大图链接的样式。

这样，当鼠标滑过每个小图时，就会显示对应的大图链接，移出时则隐藏大图链接。当用户点击大图链接时，就可以查看对应的大图了。