show / hide image,text,video...

Question

how to show one image , then hide it after 2 seconds , and then show another image ?

Answer 1

Do you mean something like an automatic slideshow? You can do that fro example by making giving the images the same class name:

<img class="mySlides" src="pic1.jpg" style="width:100%">
<img class="mySlides" src="pic2.jpg" style="width:100%">
<img class="mySlides" src="pic3.jpg" style="width:100%">

And then create a for loop and add the settimeout method to switch images every two seconds

for example:

<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
</script>