图像更改单击Javascript，我可以添加一个计时器进行更改吗？

编辑：如果用户没有单击，是否有任何方法可以只启用间隔？示例：我将间隔设置为20秒，但如果用户在15秒时单击了第一个图像，则下一个图像仅在剩余的5秒内显示。我需要一个计时器或一次点击，但不是两者都需要。谢谢

所以我有下面的javascript，它目前可以在onclick上运行。是否可以将其修改为同时添加计时器？因此，如果他们不点击第一张图片，我可以设置一个计时器转到图片2。。然后转到图3。。等等谢谢你的努力

<img alt="" src="image1.gif" style="height: XXXpx; width: XXXpx" id="imgClickAndChange" onclick="changeImage()"  />

<script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "image1.gif") 
        {
            document.getElementById("imgClickAndChange").src = "image2.gif";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "image3.gif";
        }
    }
</script>

您可以使用setInterval每隔一段时间调用changeImage函数

这应该起作用：

<script language="javascript">
    function changeImage() {
        var img = document.getElementById("imgClickAndChange");
        img.src = (img.src == 'image1.gif') ? 'image2.gif' : 'image3.gif';
    }

    // auto-trigger every 1 second, change 1000 as needed
    setInterval(changeImage, 1000);
</script>

注意：修改代码使其更小。

使用setInterval

---

请尝试使用下面的代码段，它会在设定的时间后拾取随机图像-

<script type="text/javascript" language="javascript">
          var intTimer=0;

          function ImageRotate()

          {
              intTimer = self.setInterval("GenerateRandom()",3000);
          }

          function GenerateRandom()
          {
          var intNumber = 10;  
          var intRandom = 0;

              intRandom = Math.floor(Math.random() * intNumber + 1);

              document.getElementById("ImageRandom1").src = 
              "Pictures1/Image" + intRandom + ".JPG";

      }
 </script>

---

将图像放入数组，然后使用setInterval调用如下函数

编辑！更新

---

是否只有在用户未单击的情况下才有间隔？示例：我将间隔设置为20秒，但如果用户在15秒时单击了第一个图像，则下一个图像仅在剩余的5秒内显示。我需要一个计时器或一次点击，但不是两者都需要。谢谢如果我理解正确，您想再次从0设置间隔吗？如果是这样的话，我会对代码做一些更改是的，确切地说，如果没有单击，我需要一个计时器，如果他们确实单击，计时器将重置为设置间隔。。。我尝试了你的代码，但不幸的是它无法正常工作。@unrelworld你能在JSFIDLE或jsBin中提供你的代码吗？所以我要找的正是。。。用户将看到一幅图像。如果用户没有点击，20秒后它会切换到下一个图像。如果用户这样做，下一个图像也会有一个20秒的计时器或单击。当前计时器启动，如果用户在15秒时单击say，则下一个图像将在5秒时更改。我需要每个图像都有自己的20秒计时器。谢谢！是否只有在用户未单击的情况下才有间隔？示例：我将间隔设置为20秒，但如果用户在15秒时单击了第一个图像，则下一个图像仅在剩余的5秒内显示。我需要一个计时器或一次点击，但不是两者都需要。谢谢

<script type="text/javascript" language="javascript">
          var intTimer=0;

          function ImageRotate()

          {
              intTimer = self.setInterval("GenerateRandom()",3000);
          }

          function GenerateRandom()
          {
          var intNumber = 10;  
          var intRandom = 0;

              intRandom = Math.floor(Math.random() * intNumber + 1);

              document.getElementById("ImageRandom1").src = 
              "Pictures1/Image" + intRandom + ".JPG";

      }
 </script>

var i = 0,
    element = document.getElementById("imgClickAndChange"),
    images = ["image1.gif", "image2.gif", "image3.gif"],
    timer = setInterval(changeImage, 25000);      

function changeImage() {
    element.src = images[(i >= images.length) ? (i = 0) : i++];
}

element.addEventListener("click", function() {
    changeImage();
    clearInterval(timer);
    timer = setInterval(changeImage, 25000);
}, false);