Simple background image fade in/out - JSFiddle
HTML
<div id="etapes">
</div>
CSS
body {
margin:0;
padding:0;
}
#etapes {
width:250px;
height:250px;
overflow:hidden;
background-color: none;
}
img {
width:250px;
height:250px;
margin: 0;
display:none;
background-size:cover;
}
JavaScript
var imageLinks = [
"http://nhs-static.bdxcdn.com/globalresources14/newhomesource/images/homepage/search_background.jpg",
"https://www.naturephotographie.com/wp-content/uploads/2016/12/Back-From-The-Edge-Best-Of-2016.jpg",
"https://www.empara.fr/medias/cf205f36bf027a5b0daeef118cb933ee.jpg"];
var container = $("#etapes");
for (var i = 0; i < imageLinks.length; i++)
{
container.append($('<img>', { src: imageLinks[i] }));
}
function animg()
{
$("#etapes img:first").appendTo('#etapes').fadeOut(5000);
$("#etapes img:first").fadeIn(5000);
setTimeout(animg, 5000);
}
animg();