dee*_*eep 3 html javascript css
我创建了一个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>
请有人可以帮助如何一次只获取一个图像,并以指定的间隔消失另一个图像.
如果你想尝试使用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>有两个图像放在同一个容器中.页面加载时都隐藏这两个.您不需要在主体中使用onload事件处理程序,因为JS将在HTML加载后执行.那时它将调用setInterval方法,该方法每1秒更改一次图像.