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

How to show just one image at a time at a set interval?

本文关键字：一次 显示 图像 一个 时间      更新时间：2023-09-26

我创建了一个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

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

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

如果您想在普通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>

在同一个容器中放置了两个图像。当页面加载时，这两个都将被隐藏。您不需要在主体中使用onload事件处理程序，因为JS将在HTML加载后执行。这一次它将调用setInterval方法，该方法将每1秒更改一次图像。

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

演示：http://jsfiddle.net/stanze/kdk6kkLv/

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

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

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：

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.

您可以在此处查找setInterval()。

使用setinterval隐藏一个图像并显示另一个图像的图像幻灯片。

你可以试试下面提到的简单方法：

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);
}

相同的另一个选项：

使用以下代码代替setInterval(slide,2000);：

setTimeout(function() {
    slide();
    setTimeout(arguments.callee, interval)
}, interval);
相关文章：