[英]How to display multiple images just below the “main image” in same page
我在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>
如何在同一頁面的“主圖像”下方顯示多個圖像？
$(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>
這對我來說是工作
這就是你想要的嗎？ https://jsfiddle.net/bfahmi/2m16vjj1/3/
$(document).ready(function() { $('.featured-image').on('click', '#btn-display', function() { if ($('.gallery').is(':visible')) $('.gallery').hide(); else $('.gallery').show(); }); });
.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; }
<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>
您可以使用以下代碼實現目標：
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>
如何在圖像點擊的同一頁面上的多個圖像上使用bootstrap模式？
[英]How to use bootstrap modal on multiple images on same page on image click?
如何使用javascript在同一HTML頁面上上傳1張圖像+轉換為base64+顯示具有相同ID的同一圖像多次？
[英]How to upload 1 image + convert to base64 + display the same image with the same ID multiple times on the same HTML page with javascript?
如何使用戶能夠在不刷新頁面的情況下從剛剛上傳的多個圖像中選擇一個圖像？
[英]How can I enable user to select one image from the multiple images that he has just uploaded without refreshing the page?
單擊圖庫中的圖像，然后在同一頁面中顯示多個圖像
[英]clicking on an image from a gallery and showing multiple images in the same page
如何在javascript中使用相同的圖像多次顯示相同的圖像
[英]how to display same image multiple times using same image in javascript
單擊時如何在不更改圖像位置的情況下在相應圖像下方顯示文本？
[英]how to display text below the respective image when it is clicked with out changing the position of the images?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.