bildspelare

by atheer Salim

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div id="imagecontainer">

<img class ="images" src="https://s.abcnews.com/images/International/cristiano-ronaldo-gty-ml-190122_hpMain_4x3_992.jpg">

<img class= "images" src="https://e00-marca.uecdn.es/assets/multimedia/imagenes/2018/08/19/15347041965884.jpg">

<img class= "images"src="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/default/0001/67/thumb_66073_default_news_size_5.jpeg">

<img class= "images" src="http://as01.epimg.net/en/imagenes/2018/04/26/football/1524749148_875781_1524749202_noticia_normal.jpg">

</div>
  
</body>
</html>

CSS

.images{
  width: 50%;
  height: 50%;
}

JavaScript

$(document).ready(function() {
$("#imagecontainer > img:gt(0)").hide();

setInterval(function() {
	$("#imagecontainer > img:first")
  	.fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#imagecontainer');
   
}, 5000)


});