Javascript 如何在设定的时间间隔内一次只显示一个图像？

我创建了一个javascript函数，它从div样式中获取两个图像，并在指定时间后显示一个图像和另一个图像

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

---

请有人帮助我们如何一次只获取一张图像，并在指定的时间间隔内消失另一张图像。

图像幻灯片使用

setinterval

隐藏一张图像并显示另一张图像

您可以尝试下面提到的简单方法： 同样的另一个选择： 而不是

setInterval（幻灯片，2000）使用以下代码：

setTimeout(function() {
    slide();
    setTimeout(arguments.callee, interval)
}, interval);

演示：

我建议通过给容器div提供id来稍微修改HTML。首先也让myDiv2隐藏起来。然后，我们可以使用javascript中名为
setInterval（）
的内置函数，将要执行的函数作为第一个参数传递给该函数，并将两次连续执行之间的时间（以毫秒为单位）作为第二个参数

setInterval（）
方法以指定的间隔（毫秒）重复调用函数

您可以查找
setInterval（）
如果您想在vanilla JS中尝试而不使用像JQuery这样的库，您可以尝试以下内容


var-imageID=0；
函数changeImage（）{
var img1=document.getElementById（“myimage1”）；
var img2=document.getElementById（“myimage2”）；
如果（imageID%2==0）{
img1.style.display='block'；
img2.style.display='none'；
}
否则{
img2.style.display='block'；
img1.style.display='none'；
}
imageID++；
}
//再次调用相同的函数，持续x秒
设置间隔（changeImage，1000）

在顶部书写是一种惯例吗？谢谢。页面上的任何HTML最好出现在任何内联JavaScript之前，这样用户就可以尽快看到页面的内容。否则，嵌入式JS将停止浏览器渲染，用户将根据脚本的位置看到空的或部分渲染的页面。这就是我从head标记中删除JS并在标记结束后添加JS的原因。写“setInterval（changeImage，1000）”更好。不需要匿名函数。@Diptendu-在您的示例中，我同时获得两个图像。我怎么能一开始只得到一个？谢谢。@deep您一开始不应该得到任何东西，因为两个图像都有“display:none”。它将是一个黑屏，然后出现一个图像。如果希望显示一个图像而不是空白屏幕，请从第二个img的样式中删除display:none。
setTimeout
不是jQuery函数。另外，您可以将其写成
setTimeout（$（“.hidden”）.hide，2000）
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);
}

setTimeout(function() {
    slide();
    setTimeout(arguments.callee, interval)
}, interval);

You can hide the image at a specified time using jQuery setTimeout function,

$(function() {
    var hidden = $('.hidden');
    setTimeout(function(){ 
        $(hidden).hide()
    }, 2000);
})

<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>

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.