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

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

javascript html image

如何在html和javascript上使用onclick多次更改图像源,javascript,html,image,Javascript,Html,Image,我试图有一个图像，一旦点击移动到图像2，然后一旦点击图像2，它将移动到图像3，然后图像4，等等，但我正在努力找到一种方法来拥有两个以上的图像？到目前为止，我已经尝试了各种不同的方法，例如重复我已经拥有的代码，使用多个if语句和switch语句，但我似乎不能使用超过2个图像。我只是一个初学者，所以很难看出我的错误。预期的结果将只是在单击每个图像后出现一些图像到目前为止，我掌握的有效代码是： HTML: 社会化媒体 var mysrc=“image1.jpg”；函数changeImage（）{

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

到目前为止，我掌握的有效代码是：

HTML:


社会化媒体
var mysrc=“image1.jpg”；
函数changeImage（）{
如果（mysrc==“image1.jpg”）{
document.images[“pic”].src=“image1.jpg”；
document.images[“pic”].alt=“image1”；
mysrc=“image.jpg”；
}
否则{
document.images[“pic”].src=“image.jpg”；
document.images[“pic”].alt=“image”；
mysrc=“image1.jpg”；
}         
}

我已经能够通过以下方式获得相同的结果：

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


</script>

</head>

<body>

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

函数更改（）{
var image=document.getElementById（'image'）；
image.src=“image1.jpg”
}

但我似乎只能得到两张图片？如前所述，我只是一个初学者，所以我真的不确定是否只是我犯了愚蠢的错误，任何建议都会非常有用。

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

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

imgCount

将在每次单击

时添加到

现在，如果单击

，并且它位于最后一张图像上，它将返回到开头。if语句查看计数器是否等于数组中的图像数量。如果没有，它会继续增加。如果没有，它会将计数器设置回0。

请原谅我的无知，但是代码只提到两个图像文件名，

image.jpg

和

image1.jpg

。你认为第三个或第四个图像应该从哪里来？抱歉，可能没有很好地解释，但到目前为止，我包含的代码就是我正在使用的代码，每当我尝试添加第三个或第四个图像时，它就会断开，我无法再让它工作，所以我正在寻找一种方法，可以包含接下来的两个图像，这有什么意义吗？抱歉，如果我没有解释清楚，我真的不知道要使用的正确术语，那么你应该显示代码，尝试添加第三个图像，以便有人能够告诉你它有什么问题。我很快在这里为你制作了一个工作脚本。没有把它变成一个答案，因为它是一个通用代码，而不是对你的代码的接受。但它应该让你走：）非常感谢你！我现在就去试试！非常感谢，这正是我想要的！

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

<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()">

<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()">