javascript - 通过选择更改图像？

Question

我之前发现了这个 fiddle :http://jsfiddle.net/VmWD9/123/它允许您使用选择框更改页面内的图像，但我似乎根本无法让它与我的一起工作。这是我拥有的:

HTML:

    <div class="orbit clean-hero-slider" role="region" data-orbit>
      <ul class="orbit-container">
        <li class="orbit-slide">
          <figure class="orbit-figure">
            <img class="orbit-image" src="img/products/product-01.jpg" alt="image alt text" name="myImage">
          </figure>
        </li>
        <li class="orbit-slide">
          <figure class="orbit-figure">
            <img class="orbit-image" src="img/products/product-01-2.jpg" alt="image alt text">
          </figure>
        </li>
        <li class="orbit-slide">
          <figure class="orbit-figure">
            <img class="orbit-image" src="img/products/product-01-3.jpg" alt="image alt text">
          </figure>
        </li>
      </ul>
    <!--<nav class="orbit-bullets">
      <button class="is-active" data-slide="1"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
      <button data-slide="2"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
      <button data-slide="3"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
    </nav> -->
  </div>

    <div class="cell small-4" style="border-left: 1px solid #d8d8d8;">
      <form method="" action="" name="myForm" class="custom-select" style="width:100%;">
  <select name="switch" onchange="switchImage();">
    <option value="1">Navy</option>
    <option value="2">Navy</option>
    <option value="3">Red</option>
  </select>
</form>
</div>

JS:

<script>

// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 3; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "../img/products/product-0" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
    document.myImage.src = imageList[selectedImage].src;
}

</script>

此外，是否可以使选择选项之一将 3 张图像更改为 3 张不同的图像？

Answer 1

您发布的代码对我来说完全没问题。可以，我知道你的确切问题吗？