我正在我的网站上展示产品，我想要包含多个图像。就像在craigslist中一样，它们是一张主图片，当你进入页面时总会出现，但随后它们就是那张图片下方的小图片。因此，当我点击其中一张较小的图片时，如何制作它，它会用它取代大图片。
答案 0 :(得分：1)
我认为不能单独使用HTML和CSS。
我认为可以通过悬停来完成。这可以通过使用CSS伪造类来完成。它类似于超链接的样式。这是这些超链接的示例，但您可以将图像包装在a标记中以使其正常工作。
a:link {width:100px;height:150px;} /* unvisited link */
a:visited {width:100px;height:150px;} /* visited link */
a:hover {width:400px;height:600px;} /* mouse over link */
a:active {width:400px;height:600px;} /* selected link */
`
修改 我举了一个例子来说明它是如何工作的（仍在盘旋，而不是点击）：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
display:inline-block;
}
a > div {
background-color:blue;
color:yellow;
text-align:center;
}
a:link > div {width:100px;height:150px;} /* unvisited link */
a:visited > div{width:100px;height:150px;} /* visited link */
a:hover > div{width:400px;height:600px;} /* mouse over link */
a:active > div{width:400px;height:600px;} /* selected link */
a:link {width:100px;height:150px;} /* unvisited link */
a:visited{width:100px;height:150px;} /* visited link */
a:hover{width:400px;height:600px;} /* mouse over link */
a:active{width:400px;height:600px;} /* selected link */
a:link p {margin:60px 0px 0px 0px} /* unvisited link */
a:visited p{margin:60px 0px 0px 0px} /* visited link */
a:hover p{margin:280px 0px 0px 0px} /* mouse over link */
a:active p{margin:280px 0px 0px 0px} /* selected link */
</style>
</head>
<body>
<a href=""><div><p>Hover</p></div></a>
</body>
</html>
答案 1 :(得分：0)
我能看到的最简单的方法是 -
使用jQuery并在较小的图像上使用数据属性 -
$('#smallImage').click(function(){
var imgUrl = $(this).attr('data-largeimage');
$('#mainImage').attr('src',imgUrl);
});