miércoles, 15 de marzo de 2017

CAPAS CON EFECTO FADEOUT DE JQUERY

Copia este código en tu editor de código y prepara cinco imágenes de 200px x 280px y una de 800px x 560px y guárdalas en la carpeta imágenes.

<html>
<head>
<style>
.content {
background-image: url("http://www.colegioiptce.com/anuncios/imagenes/img_centro.jpg");
margin: auto;
margin-top: 100px;
opacity: 0.8;
position: relative;
width: 800px;
height: 560px;
}

.content2 {
margin-top: 0px;
width: 200px;
height: 280px;
}
.content3 {
margin-top: -280px;
margin-left: 200px;
width: 200px;
height: 280px;
}
.content4 {
margin-top: -280px;
margin-left: 400px;
width: 200px;
height: 280px;
}
.content5 {
margin-top: -280px;
margin-left: 600px;
width: 200px;
height: 280px;
}
.content6 {
margin-top: 0px;
width: 200px;
height: 280px;
}
</style>
<script type="text/javascript" src="http://www.colegioiptce.com/anuncios/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$(".content").fadeOut(1500);
},17000);

setTimeout(function() {
$(".content2").fadeOut(1500);
},14000);

setTimeout(function() {
$(".content3").fadeOut(1500);
},6000);

setTimeout(function() {
$(".content4").fadeOut(1500);
},8000);

setTimeout(function() {
$(".content5").fadeOut(1500);
},10000);

setTimeout(function() {
$(".content6").fadeOut(1500);
},12000);
});
</script>

</head>
<body>
<div class="content">
<div class="content2">
<img src="http://www.colegioiptce.com/anuncios/imagenes/img1.jpg" width="100%">
</div>
<div class="content3">
<img src="http://www.colegioiptce.com/anuncios/imagenes/img2.jpg" width="100%">
</div>
<div class="content4">
<img src="http://www.colegioiptce.com/anuncios/imagenes/img3.jpg" width="100%">
</div>
<div class="content5">
<img src="http://www.colegioiptce.com/anuncios/imagenes/img4.jpg" width="100%">
</div>
<div class="content6">
<img src="http://www.colegioiptce.com/anuncios/imagenes/img5.jpg" width="100%">
</div>
</div>
</body>
</html>

ver ejemplo funcionando