Question

我想要一张5秒钟后没有点击的图像变成另一张图像，然后点击它时会返回原始图像。

所以

图片＆gt; （用户在5秒后没有点击图像）＆gt;图像提示用户点击＆gt; （用户点击）＆gt;图像回到原始状态。

有什么想法吗？

Answer 1

使用jquery非常容易

我们要做的是：当文档准备就绪时，获取所有带有“提示图像”类的图像，在计时器通过时设置计时器 - ＆gt;将其源更改为另一个源，单击它时，将其设置为默认src。

$(function(){
   var original_src = $('.promptimage').attr("src");
   $('.promptimage').attr("src",'set your image source with the prompting image').delay(800);
   $('.promptimage').click(function(){
     $('.promptimage').attr("src",original_src);
   });
});

Answer 2

当然，不是问题。您可以使用以下代码执行此操作：

<强> HTML

<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>

<强>的Javascript

// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;

// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
    img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';   
}, 2000);

// Register the click event handler for the image and clear the timeout
img.onclick = function(){
    clearTimeout(timeout);
    this.src = origSrc;    
}

你可以看到它in action here。

Answer 3

我不确定您遇到问题的确切位置，因此我将概述我认为需要的内容：

图像应该有一个onclick事件，可以确定它何时被单击。这可以设置标志并在必要时重置图像。如果计时器仍在运行，它也可以在下一步中取消计时器。

在页面加载时设置5秒计时器。一旦启动，运行一个功能，检查图像是否已被点击。如果它没有改变图像。如果它什么也没做。

我建议您搜索或重新询问有关您遇到问题的特定位的新问题。

由时间和点击触发的图像更改

3 个答案: