javascript 我如何用我的代码实现这个图像呢？我想使用onChange和类似onMouseChange的东西

k5hmc34c 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(114)

我希望我的代码能够像粘贴的图像一样工作：

当用户选择目的地时，大图片（主图像）会更改为相应的目的地，但缩略图也会随之更改，显示用户选择的目的地附带的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;
}

JavaScript

来源：https://stackoverflow.com/questions/75739817/how-do-i-achieve-the-image-this-with-the-code-that-i-have-i-wanna-use-onchange

1条答案

按热度按时间

klsxnrf11#

我把一米一米一米一米一米一米一米二米一米组合成一米三米一米。
按images[select.value]选择它们。
从images[select.value]重新创建缩略图并在其上添加mouseenter。

const images = {
  Africa: [{
    src: "images/africa1.jpg"
  }, {
    src: "images/africa2.jpg"
  }, {
    src: "images/africa3.jpg"
  }, {
    src: "images/africa4.jpg"
  }],
  Japan: [{
    src: "images/japan2.jpg"
  }, {
    src: "images/japan3.jpg"
  }, {
    src: "images/japan4.jpg"
  }, {
    src: "images/japan6.jpg"
  }],
  London: [{
    src: "images/london1.jpg"
  }, {
    src: "images/london2.jpg"
  }, {
    src: "images/london3.jpg"
  }, {
    src: "images/london4.jpg"
  }],
};
const container = document.getElementById("thumbnailsContainer");
const select = document.getElementById("s1");
const main = document.getElementById("main");
const thumbs = document.getElementsByClassName("thumbnail");
const changePictures = () => {
  container.innerHTML = images[select.value].map((img) => `<div class="thumbnail"><img src="${img.src}" width="50" height="60" /></div>`).join("");
  Array.prototype.forEach.call(thumbs, (d) => d.addEventListener("mouseenter", changeMain));
};
const changeMain = (e) => {
  main.innerHTML = `<img src="${e.target.children[0].src}">`;
};
changePictures();

<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>
<div id="main"><img src=""></div>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 我如何用我的代码实现这个图像呢？我想使用onChange和类似onMouseChange的东西

1条答案

相关问题

热门标签

最新问答