我希望我的代码能够像粘贴的图像一样工作:
- 当用户选择目的地时,大图片(主图像)会更改为相应的目的地,但缩略图也会随之更改,显示用户选择的目的地附带的6个其他图像。此外,当您将鼠标悬停在缩略图上时,它会显示在大图像(主图像容器)中。
- 我的代码现在的问题不是当我点击不同的选择选项时图像不会改变,而是大图像不会出现,而且当我悬停在缩略图上时,大图像不会改变为我悬停的位置。
- 我没有像示例那样包含那么多图片,但我希望实现相同的整体功能。我并不真正关心它的视觉效果。
下面是代码:
<form id="form">
<div>
<div>
<select id="s1" onchange="changePictures()">
<option value="Africa">Africa</option>
<option value="Japan">Japan</option>
<option value="London">London</option>
</select>
</div>
</div>
</form>
<div id="thumbnailsContainer">
<div id="thumb1" class="thumbnail">
<img src="images/africa1.jpg" width="50" height="60" />
</div>
<div id="thumb2" class="thumbnail">
<img src="images/africa2.jpg" width="50" height="60" />
</div>
<div id="thumb3" class="thumbnail">
<img src="images/africa3.jpg" width="50" height="60" />
</div>
<div id="thumb4" class="thumbnail">
<img src="images/africa4.jpg" width="50" height="60" />
</div>
</div>
const africaImages = [
{ src: "images/africa1.jpg" },
{ src: "images/africa2.jpg" },
{ src: "images/africa3.jpg" },
{ src: "images/africa4.jpg" },
];
const japanImages = [
{ src: "images/japan2.jpg" },
{ src: "images/japan3.jpg" },
{ src: "images/japan4.jpg" },
{ src: "images/japan6.jpg" },
];
const londonImages = [
{ src: "images/london1.jpg" },
{ src: "images/london2.jpg" },
{ src: "images/london3.jpg" },
{ src: "images/london4.jpg" },
];
function changePictures() {
const selectedOption = document.getElementById("s1").value;
currentOption = selectedOption;
for (let i = 0; i < 4; i++) {
document
.getElementById(`thumb${i + 1}`)
.getElementsByTagName("img")[0].src = thumbnails[selectedOption][i].src;
}
document.getElementsByName("bp")[0].src = thumbnails[selectedOption][0].src;
}
1条答案
按热度按时间klsxnrf11#
我把一米一米一米一米一米一米一米二米一米组合成一米三米一米。
按
images[select.value]
选择它们。从
images[select.value]
重新创建缩略图并在其上添加mouseenter
。