Siempre que quiero hacer un carrusel de fotos para el banner de una página web, tengo que buscar alguno en internet y siempre hay que descargarlo y son una lata.
En esta entrada les mostraré como hice un banner con fotos, las cuales van cambiando después de un cierto tiempo y además tiene flechitas para cambiarlas.
Es ideal que las imágenes tengan el mismo tamaño.
Es súper simple.
El HTML para esto quedará asi:
<body onload="cargar_banner();"> <div id="banner" style="margin:auto; width:100%; background-repeat:no-repeat; height:430px; background-position:center;" > <div style="width:5%;float:left; margin-top:150px; cursor:pointer;" onclick="slide('izq')"> <img src="images/flecha_izq.png"> </div> <div style="width:5%;float:right; margin-top:150px; cursor:pointer;" onclick="slide('der')"> <img src="images/flecha_der.png"> </div> </div> </body>
Las funciones que utilizaremos serán cargar "banner" y "slide".
Estas funciones se verán así.
(Nota: recuerden que estas funciones pueden ir en el mismo archivo HTML, recuerden tambien incluir la libería jquery antes de estas funciones)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> var i = 0; var arrImagenes = [ 'images/banner1.jpg','images/banner2.jpg', 'images/banner3.png' ]; function cargar_banner() { $("#banner").css('backgroundImage', 'url('+arrImagenes[i]+')'); var tiempo = 5000; var id_contenedor = 'banner'; setInterval( cambiarImagenFondo, tiempo) } function cambiarImagenFondo() { if(i == arrImagenes.length-1) { i=0; } else { i=i+1; } $('#banner').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + arrImagenes[i] + ')'); }).fadeTo('slow', 1); } function slide(lado) { if(lado == 'izq') { if(i == 0){ i = 2; } else{ i--; } $('#banner').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + arrImagenes[i] + ')'); }).fadeTo('fast', 1); } else { if(i == 2){ i = 0; } else{ i++; } $('#banner').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + arrImagenes[i] + ')'); }).fadeTo('slow', 1); } } </script>
Para ver funcionando este código hace click aquí
Gracias por leer, si te gustó déjame un comentario ^^
No hay comentarios:
Publicar un comentario