javascript - 使用 Javascript 更改/循环图像

Question

我正在关注 TechFunda 的关于单击按钮更改图像的代码。这是代码:

http://techfunda.com/howto/444/changing-of-images

<h1>Changing the Image</h1>
    <img src="waterbottel.gif" id="myImage" width="100" height="150">
    <input type="button" onclick="changeImage()" value="Change" />
    <p>Click on the "Change" button to convert waterbottle<br />
        into Softdrink bottle</p>

    <script>
        function changeImage() {
            var image = document.getElementById('myImage');
            if (image.src.match("colorbottel")) {
                image.src = "waterbottel.gif";
            }
            else {
                image.src = "colorbottel.gif";
            }
        }
    </script>

它从一张图片到第二张图片，然后又回到第一张图片。

我将如何着手添加另一个图像以进入循环？ (例如第一张图片 > 第二张图片 > 第三张图片 > 回到第一张)

Answer 1

改为使用 src 数组，并通过数组递增索引:

const srcs = ['foo.png', 'bar.png', 'baz.png'];
let i = 0;
function changeImage() {
  var image = document.getElementById('myImage');
  i = (i + 1) % srcs.length;
  image.src = srcs[i];
}

现场演示:

const srcs = ['https://www.gravatar.com/avatar/49196f761a0b00f0ee42e3e4e6bad2f0?s=32&d=identicon&r=PG&f=1', 'https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=32&d=identicon&r=PG&f=1'];
let i = 0;

function changeImage() {
  var image = document.getElementById('myImage');
  i = (i + 1) % srcs.length;
  image.src = srcs[i];
}

<h1>Changing the Image</h1>
<img src="waterbottel.gif" id="myImage" width="100" height="150">
<input type="button" onclick="changeImage()" value="Change" />
<p>Click on the "Change" button to convert waterbottle<br /> into Softdrink bottle</p>