Question

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

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

Answer 1

如果您想尝试使用vanilla JS而不使用像JQuery这样的库

，可以尝试以下操作

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

Answer 3

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

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() here。

Answer 4

图像幻灯片使用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);

如何以设定的间隔一次只显示一个图像？

4 个答案:

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

同样的另一种选择：