Question

所以我在HTML中排列了3个图像，下面有一个大图像，下面的1个大图像是与前3个图像相同的图像。没有缩略图或任何正在使用的图像。我想要做的就是当我将鼠标悬停在它应该显示的第一个小图像上并更改底部图像时，如果我将它移开，它会变回原来的状态，当我将大图片悬停在底部时，与其他2张照片相同应该这样。像（在HTML中）

组织

Pic1 pic2 pic3

PIC4（大）

  <img src="guitars.jpg" width="80" height="60" alt="Guitars"> 
  <img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover=""> 
  <img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover=""> 
  <br> 
  <img src="guitars.jpg" width="400" height="300">

Answer 1

一个简单的解决方案是在小图像上实现onclick或onmouseover事件，并更新大图像的src值。

请参阅此参考：http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

如果您希望以后轻松添加更多图片，则可能需要带有自定义寻呼机的滑块。

如果您对jQuery感到满意，我建议您使用此插件，因为它非常易于使用：

http://jquery.malsup.com/cycle2/ （查看轮播寻呼机演示）

祝你好运！

Answer 2

尝试使用CREATE TABLE table1 ( ProductID int NOT NULL, QtyAvailable smallint, UnitPrice DECIMAL(10,2) NOT NULL, InventoryValue1 decimal(10,2) AS (QtyAvailable * UnitPrice) VIRTUAL, InventoryValue2 DECIMAL(10,2) AS (QtyAvailable * UnitPrice) PERSISTENT ); css，:hover，:nth-of-type()，一般兄弟选择器

:not()

img:not(.lg) {
  width:50px;
  height: 50px;
}

img.lg {
  width:160px;
  height:160px;
  background-image:url(http://placehold.it/160/ff0000/ffffff);
}

img:nth-of-type(1) {
   background-image:url(http://placehold.it/50/ff0000/ffffff);
}

img:nth-of-type(2) {
   background-image:url(http://placehold.it/50/00ff00/ffffff);
}

img:nth-of-type(3) {
   background-image:url(http://placehold.it/50/0000ff/ffffff);
}

img:nth-of-type(1):hover ~ .lg {
  background-image:url(http://placehold.it/160/ff0000/ffffff);
}

img:nth-of-type(2):hover ~ .lg {
  background-image:url(http://placehold.it/160/00ff00/ffffff);
}
img:nth-of-type(3):hover ~ .lg {
  background-image:url(http://placehold.it/160/0000ff/ffffff);
}

Answer 3

我将给你一个只有两个元素的例子（只有一个元素具有事件功能），然后你可以扩展到3个图像。基本思路是在悬停时将大图像的src更改为图像的this.src（在JS中它是onmouseover事件）。然后在onmouseout上将src设置回正常图像。如果原始图像只是第一个小图像，只需将其设置为<img>元素即可。否则跟踪它。

在以下示例中，#main是大图片，#apple是第一张小图片，#banana是第二张小图片。

// This gets the original src of the main (large image)
// That way when it's changed we can refer to this variable to revert it
var original = document.getElementById("main").src;

// On mouseover the "banana" image, that the src of the main image to src of the banana
document.getElementById("banana").onmouseover = function(){
    document.getElementById("main").src = this.src;
}

// On mouseout of "banana" we change the main image back to it's original image
document.getElementById("banana").onmouseout = function(){
    document.getElementById("main").src = original;
}

Fiddle Example

4 HTML格式的图像，在大图片中悬停时需要帮助显示小图片

3 个答案: