Question

编辑：如果用户没有点击，是否只有间隔才会启动？示例：我设置了20秒的间隔，但如果用户在15秒时单击了第一张图像，则下一张图像仅显示剩余的5秒。我需要一个计时器 - 或 - 一个点击，但不是两个。谢谢！

所以我有下面的javascript，目前正在点击。它可以修改为还添加计时器吗？因此，如果他们没有点击第一张图片，我可以设置一个计时器转到图像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>

Answer 1

您可以使用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>

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

Answer 2

使用setInterval

setInterval(function() { changeImage(); }, 3000);

Answer 3

尝试使用下面的代码段，它会在设定的时间后选择随机图片 -

<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>

Answer 4

将您的图像放入数组，而不是使用setInterval调用您的函数 jsBin Demo

已编辑！ 已更新

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);

图片更改onclick Javascript，我可以添加一个计时器来改变吗？

4 个答案: