Cómo hacer un Banner rotativo con CSS

Mediante el empleo de los principios utilizados en la animación digital, puede agregar banners de rotación a sus páginas web. Los programas de terceros que generan banners rotativos vienen en una variedad de lenguajes y tecnologías incluyendo Flash y jQuery programación. Desde banners rotativos son nada más que imágenes que cambian con el tiempo, se puede usar Cascading Style Sheets o CSS para producir este efecto. Crear una animación en cámara lenta por el apilamiento de múltiples banderas y haciendo que aparezcan cada pocos segundos.

Instrucciones

1 Abrir un documento de página web. Mover a la sección del cuerpo del documento y agregue el código siguiente en el lugar donde desea que aparezca tu banner:

<Div id = "principal">

<div id = "banner1" class = "banners">
<Img src = "firstImage.jpg" alt = "imagen" />
</ Div>

<div id = "banner2" class = "banners">
<Img src = "beach1.png" alt = "imagen" />
</ Div>

</ Div>

Este código crea un contenedor div que contiene sus imágenes de banner. Este atributo id del div es "principal". La segunda div contiene la imagen de la primera bandera. Este atributo id del div es "banner1." Sustituir "INSERT BANDERA URL / nombre aquí" con el URL de una de las imágenes de banner o el nombre de un archivo en el disco duro que contiene un segundo div bandera image.The lleva a cabo su segunda bandera imagen. Identificación de este div es "banner2." Sustituir "INSERT bANDERA URL / nombre aquí" con la dirección URL o el nombre del archivo de otra bandera que le gustaría incluir en la página web.

2 Pegar el código que se muestra a continuación en su sección de documentos de la cabeza:

<Style type = "text / css">
.banners {display: none; position: absolute}
</ Style>

Este código crea la definición de clase CSS que hacen referencia las etiquetas de imagen en el cuerpo. La clase hace que cada imagen invisible estableciendo su valor de visualización a "ninguno".

3 Agregue el siguiente código JavaScript debajo del código CSS se describe en la sección anterior:

var bannerTimer;
var bannerCounter = 0;
numberOfBanners var;
var FirstPass = true;
var previousBanner;

retardo var = 4;
banners var = [
"banner1 banner2", ""
];
Este código JavaScript establece los valores utilizados por la función que los ciclos de las imágenes. Reemplazar el valor de retardo con el número de segundos que desea que su página web depósito antes de cambiar las banderas. Tenga en cuenta que el objeto pancartas contiene la lista de ID de conjunto de la bandera en la sección del cuerpo. Esos son los ID "banner1" y "banner2."

4 Agregue el siguiente código JavaScript a continuación el código mostrado en la sección anterior:

startBanners function () {
var currentBanner = document.getElementById (banners [bannerCounter]);
currentBanner.style.display = "bloque";

si (FirstPass == false) {
previousBanner.style.display = "none";
}
FirstPass = false;

previousBanner = currentBanner;
bannerCounter ++;

si (bannerCounter> (numberOfBanners - 1))
bannerCounter = 0;

var bannerTimer = setTimeout ( "startBanners ()", retardo * 1000);
}

window.onload = function () {
numberOfBanners = banners.length;
startBanners ();
FirstPass = false;
}

</ Script>

La función startBanners ejecuta repetidamente. La frecuencia de repetición coincide con el valor que se establece en la variable de retraso. Los ciclos de función a través de las banderas objeto y hace que cada uno de ellos visible mediante la alteración de valor de visualización del objeto. Cada vez que esta función se ejecuta, se esconde la bandera que es visible y que se superpone a la siguiente imagen de la bandera en el objeto de la bandera con el. La función window.onload determina el número de dúplex que se crea en la sección del cuerpo y le asigna un valor a una variable denominada "numberOfBanners" variable. La función window.onload en desencadena la función startBanner.

5 Guarde el documento. Poner en marcha el explorador y abra el documento. El proceso de carga comienza y gira a través de sus imágenes de banner que se presentan uno por uno.

Consejos y advertencias

• Este ejemplo contiene dos imágenes de banner. Añadir más banderas añadiendo más bloques div para la sección de documentos cuerpo como se indica anteriormente. Cada vez que se agrega un nuevo div, darle un nombre identificador único y el nombre de las banderas objeto en el código JavaScript. Por ejemplo, si se ha añadido una tercera bandera, se crearía una tercera div y, posiblemente, el nombre de "banner3."
• Su ciclo de banderas en el orden en que se incluyen en la página web.
• banderas CSS
• Rotar imágenes CSS
• bandera JavaScript
• banners HTML