Question

我在Html中创建了一个“主图像”。现在，当我点击同一页面上的“主图像”时，我想在“主图像”下面显示多个图像。这是我的下面代码，它在Html中创建了一个“主图像”。

<html>
  <body>
  <p>The image is a link.</p>
   <a href="default.asp">
    <img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;">
   </a>
  </body>
</html>

如何在同一页面的“主图像”下方显示多个图像？

Answer 1

$(document).ready(function() {
    $('.thumbs').hide();
	$('.main-image').on('click', function(){
		$('.thumbs').show();	
	});
});

.outer {
	width:600px; 
	float:left; 
}
.main-image , 
.main-image img { 
	width:100%; 
	float:left; 
	overflow:hidden; 
}
.thumbs {
	width:100%; 
	float:left; 
	margin-top:15px;
}
.thumbs img {
	 display:inline-block; 
	 width:100px;
	 margin-right:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">

<div class="main-image">
	<img src="about.jpg" alt="about" />
</div>
<div class="thumbs">
	<img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    
</div>

</div>

这对我有用

Answer 2

这是你想要的吗？ https://jsfiddle.net/bfahmi/2m16vjj1/3/

＆＃13;

$(document).ready(function() {
  $('.featured-image').on('click', '#btn-display', function() {
    if ($('.gallery').is(':visible')) $('.gallery').hide();
    else $('.gallery').show();
  });
});

＆＃13;

.images {
  width: 50%;
  padding: 0 auto;
}
.featured-image,
.gallery {
  width: 100%;
  text-align: center;
}
.gallery {
  display: none;
  margin: 10px 0;
}
.featured-image img {
  width: 100%;
  max-width: 300px;
}
.gallery img {
  width: 20%;
  max-width: 70px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="images">
  <div class="featured-image">
    <a id="btn-display" href="#">
      <img src="https://placehold.it/300x300/?text=featured-image">
    </a>
  </div>
  <div class="gallery">
    <img src="https://placehold.it/300x300/?text=image-1">
    <img src="https://placehold.it/300x300/?text=image-2">
    <img src="https://placehold.it/300x300/?text=image-3">
    <img src="https://placehold.it/300x300/?text=image-4">
  </div>
</div>

＆＃13;

Answer 3

您可以使用以下代码实现目标：

img {
  width:42px;
  height:42px;
  border:0;
}
a {
  text-decoration:none;
}

<p>The image is a link.</p>
<a href="/">
  <img src="http://placehold.it/42x42" alt="HTML">
</a>
<div>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
</div>

如何在同一页面中的“主图像”正下方显示多个图像

3 个答案: