2秒后隐藏/显示图像
[英]Hide/Show image after 2 seconds
问题描述
So I need to have an image alternatively appear and disappear every 2 seconds, I've been trying using javascript and I've gotten stuck, I feel like it's something so simple but i can't work it out, any help is appreciated. 
所以我需要有一个图像交替出现并且每2秒消失一次，我一直在尝试使用javascript而且我已经卡住了，我觉得它很简单，但我无法解决，任何帮助都表示赞赏。
HTML HTML
<body onload="Show()">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JAVASCRIPT 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);
}
}
5 个解决方案
解决方案1
2 2014-05-21 12:03:58
There are a lot of problems with your code. 您的代码存在很多问题。
As Juhana mentioned, you're using
setTimeoutwrong.正如Juhana所提到的，你正在使用setTimeout错误。Hide()isn't being called anywhere.Hide()不会在任何地方被调用。
Here's what you can do: 这是你可以做的：
JavaScript 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 HTML
<body onload="blink()">...</body>
Working example . 工作实例 。
解决方案2
2 已采纳 2014-05-21 12:07:22
I changed your javscript to this: 我把你的javscript更改为：
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "hidden";
hidden = !hidden;
},2000);
and deleted the onload function from your <body> tag. 并从<body>标签中删除了onload函数。
解决方案3
0 2014-05-21 12:00:56
in you setTimeout()s swap show and hide. 在你setTimeout（）的交换显示和隐藏。 Also, remove var Cntr. 另外，删除var Cntr。 wont need it 不需要它
function Hide()
{
document.getElementById("image").style.visibility="hidden";
setTimeout("Show()", 2000);
}
function Show()
{
document.getElementbyId("image").style.visibility="visible";
setTimeout("Hide()", 2000);
}
解决方案4
-1 2014-05-21 12:10:01
尝试这个 -
$(function($) { setInterval(function() { if($('#image').is(':visible')) $('#image').hide(); else $('#image').show(); }, 2000); });
解决方案5
-1 2014-05-21 13:06:12
Use jQuery instead of raw JS, it is more clean and simple. 使用jQuery代替原始JS，它更干净简单。 Use Delay and FadeTo functions with recursion and you are done with one simple function. 使用Delay和FadeTo函数进行递归，您可以使用一个简单的函数。 Call this on page load. 在页面加载时调用此方法。
function Flicker(){
$("#MyImage").delay(1500).fadeTo(300,0).delay(1500).fadeTo(300,1, Flicker);
}
Where: #MyImage is ID of image. 其中：#MyImage是图像的ID。
You can see this working @ http://jsfiddle.net/BM3qK/1/ 你可以看到这个工作@ http://jsfiddle.net/BM3qK/1/
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.