如何以设定的间隔一次只显示一个图像？
[英]How to show just one image at a time at a set interval?
问题描述
I have created a javascript function which takes two images from div style and displays it one picture first and the other picture after the specified time. 
我创建了一个javascript函数，它从div样式中获取两个图像，并在指定时间后显示一张图片和另一张图片。
JavaScript JavaScript的
var imageID = 0;
function changeImage (every_seconds) {
if (!imageID) {
document.getElementById("myimage1");
imageID++;
}
if (imageID == 1) {
document.getElementById("myimage2");
}
}
//call same function again for x of seconds
setTimeout("changeImage(" + every_seconds + ")", ((every_seconds) * 50000000000));
}
HTML HTML
<body style='background:black;' onload='changeimage(10)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='left'>
<img width='600px' height='500px' id='myimage1' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</div>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='right'>
<img width='600px' height='500px' id='myimage2' src='http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg'/>
</div>
</body>
Please can someone help how to get just a single image at a time and disappear the other one at the specified interval. 请有人可以帮助如何一次只获取一个图像，并以指定的间隔消失另一个图像。
4 个解决方案
解决方案1
5 已采纳 2015-04-07 05:00:25
You can try the following if you want to try in vanilla JS without using library like JQuery 如果你想尝试使用vanilla JS而不使用像JQuery这样的库，你可以尝试以下方法
var imageID=0; function changeImage(){ var img1 = document.getElementById("myimage1"); var img2 = document.getElementById("myimage2"); if(imageID %2 == 0){ img1.style.display = 'block'; img2.style.display = 'none'; } else { img2.style.display = 'block'; img1.style.display = 'none'; } imageID++; } //call same function again for x of seconds setInterval(changeImage, 1000);
<body style='background:black;'> <div style='position:absolute;width:100%;height:100%;left:0px;top:0px;'> <img width='600px' height='500px' id='myimage1' style='display:none' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/> <img width='600px' height='500px' id='myimage2' style='display:none' src='http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg'/> </div> </body>
There are two images placed inside the same container. 有两个图像放在同一个容器中。 Both of which are hidden when the page loads. 页面加载时都隐藏这两个。 You don't need the onload event handler in the body since the JS will get executed after the HTML loads. 您不需要在主体中使用onload事件处理程序，因为JS将在HTML加载后执行。 That time it will invoke the setInterval method that will change the image every 1 second. 那时它将调用setInterval方法，该方法每1秒更改一次图像。
解决方案2
2 2015-04-07 04:47:15
You can hide the image at a specified time using jQuery setTimeout function,
Demo : http://jsfiddle.net/stanze/kdk6kkLv/ 演示： http ： //jsfiddle.net/stanze/kdk6kkLv/
$(function() {
var hidden = $('.hidden');
setTimeout(function(){
$(hidden).hide()
}, 2000);
})
解决方案3
2 2015-04-07 04:58:58
I suggest changing the HTML a bit by giving ids to the container divs too. 我建议通过给容器div提供ID来改变HTML。 Also let myDiv2 be hidden at first. 首先让myDiv2隐藏起来。 We can then use a built-in function in javascript called setInterval() to which we pass the function to execute as the first parameter and the time in milliseconds between two consecutive executions as the second parameter. 然后我们可以在javascript中使用一个名为setInterval()的内置函数，我们将函数作为第一个参数传递给它，两个连续执行之间的时间以毫秒为单位作为第二个参数。
setInterval() method calls a function repeatedly at specified intervals (in milliseconds). setInterval()方法以指定的时间间隔（以毫秒为单位）重复调用函数。
<div id="myDiv1" style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='left'>
<img width='600px' height='500px' id='myimage1' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</div>
<div id="myDiv2" style='display:none; position:absolute;width:100%;height:100%;left:0px;top:0px;' align='right'>
<img width='600px' height='500px' id='myimage2' src='http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg'/>
</div>
Javascript: 使用Javascript：
setInterval(function() { //setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
var div1 = document.getElementById("myDiv1");
var div2 = document.getElementById("myDiv2");
if(div2.display = '') { //This executes when div2 is visible (and div1 is hidden)
div1.display = ''; //This makes div1 (and myimage1) visible
div2.display = 'none'; //This hides div2 (and myimage2)
} else { //This executes when div1 is visible (and div2 is hidden)
div2.display = '';
div1.display = 'none';
}
}, 5000); //You can give time in milliseconds between each change instead of 5000 here. 5000ms = 5s.
You can look up setInterval() here . 你可以在这里查找setInterval() 。
解决方案4
1 2015-04-07 04:46:42
Image Slideshow using setinterval for hide one and show another image. 图像幻灯片使用setinterval隐藏一个并显示另一个图像。
You can try out below mentioned simple way: 你可以尝试下面提到的简单方法：
window.onload = function() {
var image=document.getElementById("aaa");
var img_array=[...];
var index=0;
var interval = 2000;
function slide() {
image.src = img_array[index++%img_array.length];
}
setInterval(slide, interval);
}
Another option for the same: 另一种选择：
Instead of setInterval(slide,2000); 而不是setInterval(slide,2000); use below code: 使用下面的代码：
setTimeout(function() {
slide();
setTimeout(arguments.callee, interval)
}, interval);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.