如何在 html 和 javascript 上使用 onclick 多次更改图像源

Question

我试图有一个图像，一旦点击移动到图像 2，然后一旦点击图像 2 它移动到图像 3，然后图像 4 等等，但我正在努力寻找一种方法来拥有超过 2 个图像? 到目前为止，我已经尝试了各种不同的方法，例如重复我已有的代码、使用多个 if 语句和 switch 语句，但我似乎无法使用超过 2 个图像。 我只是一个初学者编码器，所以很难看出我哪里出错了。 预期的结果只是在单击每个图像后出现许多图像。

到目前为止，我正在运行的代码是：

HTML：

<!DOCTYPE html>

<html>



  <head>



    <meta charset="utf-8"/>

  <title>Social Media</title>

  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <script type="text/javascript">



    var mysrc = "image1.jpg";

        function changeImage() {

            if (mysrc == "image1.jpg") {

                document.images["pic"].src = "image1.jpg";

                document.images["pic"].alt = "image1";

                mysrc = "image.jpg";

                }



            else {

                document.images["pic"].src = "image.jpg";

                document.images["pic"].alt = "image";

                mysrc = "image1.jpg";

            }         



        }

    </script>

</head>

<body>

    <img src="image.jpg"

        alt="image" id="pic" class="portrait"

        onclick="changeImage()"

        width="1000px" height="500px"

        style="cursor:pointer">







</body>

</html>

我已经能够通过执行以下操作获得相同的结果：

function change() {
var image = document.getElementById('image');
image.src = "image1.jpg"
}


</script>

</head>

<body>

<img src="image.jpg" alt="text" id="image" onclick="change();">

但我似乎无法获得超过 2 张图像？ 如前所述，我只是一个初学者，所以我真的不确定是否只是我犯了愚蠢的错误，任何建议都会非常有帮助

Answer 1

你应该使用一个数组和一个简单的变量计数器来做到这一点。

var imgCount = 0;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];

每次点击<img>时都会添加imgCount 。

<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];
function change() {
  imgCount++;
  var image = document.getElementById('image');
  image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">

现在从数组中调用src 。 imgCount用作图像被点击次数的计数器，用于通过数组查找正确的 src，因为它也用作索引。

如果您不太了解数组，请阅读MDN 。

我相信你没有无穷无尽的图片，所以你也可以使用这个：

<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"];
function change() {
  if (imgCount !== images.length - 1)
    imgCount++;
  else 
    imgCount = 0;
  var image = document.getElementById('image');
  image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">

现在，如果点击<img>并且它在最后一个图像上，它将返回到开头。 if 语句查看计数器是否等于数组中的图像数量。 如果没有，它会继续添加。 如果没有，它将计数器设置回 0。

如何在 html 和 javascript 上使用 onclick 多次更改图像源

问题描述

1 个解决方案

解决方案1
-1 已采纳 2019-12-09 22:41:21

如何在 html 和 javascript 上使用 onclick 多次更改图像源

问题描述

1 个解决方案

解决方案1 -1 已采纳 2019-12-09 22:41:21

解决方案1
-1 已采纳 2019-12-09 22:41:21