我正在寻找一个图像框:预览和预览下的小预览列表。html 如下:
我正在寻找一个图像框:预览和预览下方的小预览列表。
html 内容如下:
<!--image list-->
<div class="image-list-container d-flex">
<div class="image-list-item cursor-pointer image-highlight">
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://5.imimg.com/data5/NR/TP/MY-9295383/hcl-desktop-500x500.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://tiimg.tistatic.com/fp/1/007/341/shock-proof-black-color-medium-size-acer-desktop-computer--825.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://cdn.britannica.com/97/155497-050-4C5BFFFC/laptop-computer.jpg" alt="" /></div>
</div>
</div>
<!---->
<div class="image-list-item cursor-pointer add-image-section add-download-img p-0">
<div id="ember519" class="dropdown btn-group h-100">
<button class="btn file-upload add-download-img-btn" type="button">
<input id="add-images-btn" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon align-text-top action-icons icon-xlg fill-dropdown-blue">
<path d="M256 15C122.9 15 15 122.9 15 256s107.9 241 241 241 241-107.9 241-241S389.1 15 256 15zm122 263H278v100c0 12.2-9.8 22-22 22s-22-9.8-22-22V278H134c-12.2 0-22-9.8-22-22s9.8-22 22-22h100V134c0-12.2 9.8-22 22-22s22 9.8 22 22v100h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
<path fill="#FFF" d="M378 234H278V134c0-12.2-9.8-22-22-22s-22 9.8-22 22v100H134c-12.2 0-22 9.8-22 22s9.8 22 22 22h100v100c0 12.2 9.8 22 22 22s22-9.8 22-22V278h100c12.2 0 22-9.8 22-22s-9.8-22-22-22z"></path>
</svg>
</button>
<button id="ember521" class="dropdown-toggle btn btn-secondary rounded-start-0 add-download-img-btn no-border" type="button"></button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item file-upload">
<input id="ember522" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
Add More Images
</button>
<button class="dropdown-item" data-ember-action="" data-ember-action-523="523">Download As ZIP</button>
</div>
</div>
</div>
</div>
<!--/-->
我仍在学习如何使用 js 来实现这种场景,当单击每个项目列表时,它将在上面的框中预览。单击主要文本时也是如此。
代码在这里 文本
谢谢你的帮助。
这里:我已经添加了 primary
按钮,但是我没有将其移动到预览图像的顶部。而且我没有添加按钮 delete
。我希望你能处理好这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Selector</title>
<style>
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.large-image {
width: 400px;
height: 300px;
border: 2px solid #ddd;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
.large-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-row {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: nowrap;
}
.image-row img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s;
}
.image-row img:hover {
border-color: #333;
}
.primary-button {
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.primary-button:hover {
background-color: #0056b3;
}
.image-row img.selected {
border-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="large-image">
<img id="mainImage" src="https://media.istockphoto.com/id/2096494657/photo/senior-couple-using-laptop-while-sitting-on-sofa-in-living-room-at-home.webp?b=1&s=170667a&w=0&k=20&c=6eNx4PV7PPg7LAZ9JNRFxvBg8pHHd_l7nvR3tx05hcQ=" alt="Selected Image">
<button class="primary-button" onclick="makePrimary()">Primary</button>
</div>
<div class="image-row" id="imageRow">
<img src="https://media.istockphoto.com/id/2039918088/photo/happy-african-american-woman-using-tablet-on-a-cozy-sofa-at-home.webp?b=1&s=170667a&w=0&k=20&c=gk4wDaG3UaQuvdWWUN0CoeJ_SzFujnMLcuzgp6JzaGI=" alt="Image 1" onclick="updateMainImage(this)">
<img src="https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.webp?b=1&s=170667a&w=0&k=20&c=PExSb0GIEAlbBm8wDtNucKJrVVJOTqn9kHEZvQBhzjU=" alt="Image 2" onclick="updateMainImage(this)">
<img src="https://media.istockphoto.com/id/2096494657/photo/senior-couple-using-laptop-while-sitting-on-sofa-in-living-room-at-home.webp?b=1&s=170667a&w=0&k=20&c=6eNx4PV7PPg7LAZ9JNRFxvBg8pHHd_l7nvR3tx05hcQ=" alt="Image 3" onclick="updateMainImage(this)">
<img src="https://media.istockphoto.com/id/1500285927/photo/young-woman-a-university-student-studying-online.webp?b=1&s=170667a&w=0&k=20&c=w6oDn8-ru4jZhnnEt8AI6KdlgCJIgaaEZ4IMV50DnsQ=" alt="Image 4" onclick="updateMainImage(this)">
</div>
</div>
<script>
let selectedImage = null;
function updateMainImage(imgElement) {
if (selectedImage) {
selectedImage.classList.remove('selected');
}
selectedImage = imgElement;
imgElement.classList.add('selected');
var newSrc = imgElement.src;
document.getElementById('mainImage').src = newSrc;
}
function makePrimary() {
if (!selectedImage) return;
const imageRow = document.getElementById('imageRow');
imageRow.prepend(selectedImage);
var newSrc = selectedImage.src;
document.getElementById('mainImage').src = newSrc;
}
</script>
</body>
</html>
@fawzan 如果这满足了您的疑问或要求,请接受答案并让其他开发人员更容易看到。