1

编辑：如果用户没有点击，是否有间隔只启动？示例：我设置了 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>
4

4 回答 4

0

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

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

于 2013-04-06T04:41:08.337 回答
0

利用setInterval

setInterval(function() { changeImage(); }, 3000);
于 2013-04-06T04:41:47.560 回答
0

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

<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>
于 2013-04-06T04:42:37.240 回答
0

将您的图像放入数组中，然后使用 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);
于 2013-04-06T04:43:52.293 回答