Question

我之前发现了这个小提琴：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

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

Answer 2

您的图片命名约定似乎与您在代码中构建的约定不同。

页面上的图片：

product-01.jpg
product-01-2.jpg
product-01-3.jpg

数组中的图片：

product-01.jpg
product-02.jpg
product-03.jpg

您的img文件夹中的图片是否正确？

Answer 3

您声明了一个空数组变量。

所以在你的for循环中，当它设置imageList [i]时，位置imageList [i]上没有项目。您需要使用array.push方法将项添加到您的数组。

var imageList = Array();
for (var i = 1; i <= 3; i++) {
    var img = new Image(70, 70);
    img.src = "../img/products/product-0" + i + ".jpg";
    imageList.push(img);
}

选择更改图像？

3 个答案: