时间戳

首页 > 解决方案 > 使用 Javascript 更改/循环图像

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

问题描述

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

http://techfunda.com/howto/444/changeing-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>

它从一个图像到第二个图像，然后返回到第一个图像。

我将如何在循环中添加另一个图像？（例如第一张图片>第二张图片>第三张图片>回到第一张）

标签： javascriptimage

解决方案

改为使用 s 数组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>

推荐阅读