July 16
Impiegando principi utilizzati in animazione digitale, è possibile aggiungere banner a rotazione alle pagine Web. Programmi di terze parti che generare dei banner a rotazione sono disponibili in una varietà di linguaggi e tecnologie, tra cui Flash e jQuery programmazione. Dal banner a rotazione non sono altro che immagini che cambiano nel corso del tempo, è possibile utilizzare i fogli CSS o Cascading Style per produrre questo effetto. Creare un'animazione rallentatore impilando più banner e facendoli apparire ogni pochi secondi.
1 Aprire un documento pagina web. Passare alla sezione corpo del documento e aggiungere il seguente codice nella posizione in cui si desidera visualizzare il tuo banner:
<Div id = "principale">
<div id = "banner1" class = "banner">
<Img src = "firstImage.jpg" alt = "image" />
</ Div>
<div id = "banner2" class = "banner">
<Img src = "beach1.png" alt = "image" />
</ Div>
</ Div>
Questo codice crea un div contenitore che contiene le immagini della bandiera. attributo id di questo div è "principale". La seconda div contenente l'immagine prima banner. attributo id di questo div è "banner1." Sostituire "Inserisci banner URL / NOME QUI" con l'URL di una immagine banner o il nome di un file sul disco rigido che contiene un banner image.The secondo div tiene la seconda bandiera immagine. id di questo div è "banner2." Sostituire "Inserisci banner URL / nOME QUI" con l'URL o il nome file di un altro striscione che si desidera includere nella pagina Web.
2 Incollare il codice riportato di seguito nella vostra sezione documenti testa:
<Style type = "text / css">
.banners {display: none; position: absolute}
</ Style>
Questo codice crea la definizione di classe CSS a cui fa riferimento il tag di immagine nel corpo. La classe rende ogni immagine invisibile impostando il suo valore di visualizzazione a "nessuno".
3 Aggiungere il seguente codice JavaScript sotto il codice CSS descritto nella sezione precedente:
var bannerTimer;
var bannerCounter = 0;
var numberOfBanners;
var firstPass = true;
var previousBanner;
var ritardo = 4;
var banner = [
"banner1", "banner2"
];
Questo codice JavaScript imposta valori utilizzati dalla funzione che cicli le immagini. Sostituire il valore per il ritardo con il numero di secondi che si desidera il deposito pagina web prima di cambiare le bandiere. Si noti che l'oggetto banner contiene l'elenco di ID set di banner nella sezione corpo. Quei ID sono "banner1" e "banner2."
4 Aggiungere il seguente codice JavaScript sotto il codice mostrato nella sezione precedente:
startBanners function () {
var currentBanner = document.getElementById (striscioni [bannerCounter]);
currentBanner.style.display = "blocco";
if (firstPass == false) {
previousBanner.style.display = "none";
}
firstpass = false;
previousBanner = currentBanner;
bannerCounter ++;
if (bannerCounter> (numberOfBanners - 1))
bannerCounter = 0;
var bannerTimer = setTimeout ( "startBanners ()", ritardo * 1000);
}
window.onload = function () {
numberOfBanners = banners.length;
startBanners ();
firstPass = false;
}
</ Script>
La funzione startBanners eseguito ripetutamente. La frequenza di ripetizione corrisponde al valore impostato nella variabile di ritardo. I cicli funzione tramite il banner oggetto e rende ognuno visibile alterando valore di visualizzazione dell'oggetto. Ogni volta che questa funzione viene eseguita, si nasconde il banner che è visibile e sovrapposizioni che l'immagine successiva striscione nell'oggetto banner con. La funzione window.onload determina il numero di duplex che si crea nella sezione corpo e assegna un valore a una variabile denominata variabile "numberOfBanners". La funzione window.onload in attiva la funzione startBanner.
5 Salvare il documento. Avviare il browser e aprire il documento. L'evento onload inizia e cicli attraverso le immagini della bandiera visualizzare una ad una.