2秒后隐藏/显示图像

Question

所以我需要有一个图像交替出现并且每2秒消失一次，我一直在尝试使用javascript而且我已经卡住了，我觉得它很简单，但我无法解决，任何帮助都表示赞赏。

HTML

<body onload="Show()">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">

JAVASCRIPT

var Cntr=1

function Hide()
{
    Cntr++;
    document.getElementById("image").style.visibility="hidden";
    if (Cntr==2){
        setTimeout("Hide", 2000);
    }
}

function Show() 
{
    Cntr--;
    document.getElementbyId("image").style.visibility="visible";
    if (Cntr==1) {
        setTimeout("Show", 2000);
    }

}

Answer 1

您的代码存在很多问题。

正如Juhana所提到的，你正在使用setTimeout错误。
Hide()不会在任何地方被调用。

这是你可以做的：

JavaScript的

// Store the status of the image. Initially it is 'visible'.
var isVisible = "visible";


function blink() {
    // Toggle the position.
    if(isVisible == "visible") isVisible = "hidden";
    else                       isVisible = "visible";

    // Update it.
    document.getElementById("image").style.visibility = isVisible;

    // Repeat the process every 2 seconds.
    setTimeout(blink, 2000);
}

HTML

<body onload="blink()">...</body>

工作实例 。

Answer 2

我把你的javscript更改为：

var hidden = false;

setInterval(function(){
    document.getElementById("image").style.visibility= hidden ? "visible" : "hidden";
    hidden = !hidden;
},2000);

并从<body>标签中删除了onload函数。

这里也是一个JSFIDDLE 。

Answer 3

在你setTimeout（）的交换显示和隐藏。 另外，删除var Cntr。 不需要它

function Hide()
{

document.getElementById("image").style.visibility="hidden";

setTimeout("Show()", 2000);

}

function Show() 
{

document.getElementbyId("image").style.visibility="visible";

setTimeout("Hide()", 2000);


}

Answer 4

尝试这个 -

$(function($) { setInterval(function() { if($('#image').is(':visible')) $('#image').hide(); else $('#image').show(); }, 2000); });

Answer 5

使用jQuery代替原始JS，它更干净简单。 使用Delay和FadeTo函数进行递归，您可以使用一个简单的函数。 在页面加载时调用此方法。

function Flicker(){
    $("#MyImage").delay(1500).fadeTo(300,0).delay(1500).fadeTo(300,1, Flicker);
}

其中：#MyImage是图像的ID。

你可以看到这个工作@ http://jsfiddle.net/BM3qK/1/

希望这可以帮助。

2秒后隐藏/显示图像

问题描述

5 个解决方案

解决方案1
2 2014-05-21 12:03:58

JavaScript的

HTML

解决方案2
2 已采纳 2014-05-21 12:07:22

解决方案3
0 2014-05-21 12:00:56

解决方案4
-1 2014-05-21 12:10:01

解决方案5
-1 2014-05-21 13:06:12

2秒后隐藏/显示图像

问题描述

5 个解决方案

解决方案1 2 2014-05-21 12:03:58

JavaScript的

HTML

解决方案2 2 已采纳 2014-05-21 12:07:22

解决方案3 0 2014-05-21 12:00:56

解决方案4 -1 2014-05-21 12:10:01

解决方案5 -1 2014-05-21 13:06:12

解决方案1
2 2014-05-21 12:03:58

解决方案2
2 已采纳 2014-05-21 12:07:22

解决方案3
0 2014-05-21 12:00:56

解决方案4
-1 2014-05-21 12:10:01

解决方案5
-1 2014-05-21 13:06:12