jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

下面为您提供详细的jQuery实现鼠标滑过商品小图片上显示对应大图片的攻略：

1. 准备工作

首先要做的是准备好HTML结构，需要有一个商品小图片的容器，一个商品大图片的容器和多张商品小图片的图片元素。

HTML结构示例如下：

<div class="small-img-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  ...
</div>
<div class="big-img-container">
  <img src="img1_big.jpg">
</div>

接下来，需要在CSS中设置图片的样式，以及设置大图片的位置，让它在小图片容器下方且不可见。示例代码如下：

.small-img-container img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  cursor: pointer;
}
.big-img-container img {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

2. jQuery实现鼠标滑过小图片显示对应大图片

接下来就要开始使用jQuery了。首先，我们需要获取到商品小图片容器和商品大图片容器的元素，并通过jQuery的函数来绑定鼠标滑过事件：

$('.small-img-container img').hover(function () {
  // 鼠标滑过事件
}, function () {
  // 鼠标移开事件
});

当鼠标滑过小图片容器中的某一张图片时，我们需要通过jQuery获取到当前图片对象的src属性值，并赋值给商品大图片的src属性，以此来实现鼠标滑过小图片时，对应的商品大图片会显示出来：

$('.small-img-container img').hover(function () {
  // 获取当前图片对象的src属性值
  var src = $(this).attr('src');
  // 将图片对象的src属性值赋值给大图片
  $('.big-img-container img').attr('src', src);
  // 显示大图片
  $('.big-img-container img').show();
}, function () {
  // 鼠标移开事件
});

然而，当鼠标移开商品小图片容器时，需要将商品大图片隐藏。我们可以通过使用jQuery的hide()函数来隐藏商品大图片：

$('.small-img-container img').hover(function () {
  // 获取当前图片对象的src属性值
  var src = $(this).attr('src');
  // 将图片对象的src属性值赋值给大图片
  $('.big-img-container img').attr('src', src);
  // 显示大图片
  $('.big-img-container img').show();
}, function () {
  // 隐藏大图片
  $('.big-img-container img').hide();
});

示例

下面给出两个示例，演示如何实现鼠标滑过商品小图片上显示对应大图片的功能。

示例一

HTML代码：

<div class="small-img-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>
<div class="big-img-container">
  <img src="img1_big.jpg">
</div>

CSS代码：

.small-img-container img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  cursor: pointer;
}
.big-img-container img {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

jQuery代码：

$('.small-img-container img').hover(function () {
  // 获取当前图片对象的src属性值
  var src = $(this).attr('src');
  // 将图片对象的src属性值赋值给大图片
  $('.big-img-container img').attr('src', src);
  // 显示大图片
  $('.big-img-container img').show();
}, function () {
  // 隐藏大图片
  $('.big-img-container img').hide();
});

示例二

HTML代码：

<div class="small-img-container">
  <img src="img4.jpg">
  <img src="img5.jpg">
  <img src="img6.jpg">
</div>
<div class="big-img-container">
  <img src="img4_big.jpg">
</div>

CSS代码：

.small-img-container img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  cursor: pointer;
}
.big-img-container img {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

jQuery代码：

$('.small-img-container img').hover(function () {
  // 获取当前图片对象的src属性值
  var src = $(this).attr('src');
  // 将图片对象的src属性值赋值给大图片
  $('.big-img-container img').attr('src', src);
  // 显示大图片
  $('.big-img-container img').show();
}, function () {
  // 隐藏大图片
  $('.big-img-container img').hide();
});

以上就是完整的攻略，希望能对您有所帮助。