miércoles, 7 de diciembre de 2016

Como hacer carrusel para banner de página

Hola amigos Arcanitos.

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