Hvordan lage en webside Picture endrer seg med tiden

Hvis websiden er kjedelig eller altfor overfylt med bilder, kan du vurdere å lagre bildene i en lysbildefremvisning. Ved hjelp av dynamiske bilder som endres over tid kan legge interesse og øke hvor mye du er i stand til å vise med begrenset plass. Mens det finnes utallige måter å lage dynamiske bilder i en web-side, kanskje det enkleste er ved hjelp av enkel samling av koding metoder kollektivt kjent som HTML5.

Dynamic Web

Hypertext Markup Language, eller HTML, er det opprinnelige språket av World Wide Web. HTML består av markup som beskriver hvordan en nettleser skal vise teksten på en side. Tidlige versjoner av HTML tillot ikke for mye dynamikk eller interaktivitet i nettleseren, men som raskt endret som nettet utviklet seg. Opprinnelig utviklere vises dynamisk innhold via plug-in programvare som Java Applets, Flash eller Silverlight, men i dag de fleste nettlesere kan opprinnelig håndtere HTML5, som er designet med dynamisk innhold i tankene. HTML5 er rett og slett en kombinasjon av spesialiserte koder, en omfattende stil og layout språk kalt Cascading Style Scripts, og et skriptspråk kalt Javascript som gjør at kode kjøres i nettlesere.

JQuery biblioteket

For å vise forskjellige bilder på en webside, trenger du ikke å skrive en komplett animasjon skript fra scratch. Flere biblioteker eksisterer som gjør animasjon enkelt å gjøre. Den Javascript-bibliotek mest brukte kalles jQuery. JQuery forenkler Javascript syntaks og inneholder mange ferdige funksjoner, inkludert flere for å animere bilder. For å bruke jQuery-biblioteket, kan du laste ned biblioteket og vert det selv, eller du kan peke på et bibliotek som Google er vert for offentlig bruk. Bare inkludere følgende i HTML header seksjon:

<Script src = "& lt; / script" rel = "nofollow"> http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;> & lt; / script>

En Slide Show Script

Du kan sette opp et enkelt bilde swap ved hjelp av CSS og en kort script. Først i HTML-siden, viser bildene dine med kode som ser slik ut:

<Div id = "slideshow">
<Img src = "image_one.png" style = "position: absolute" class = "dagens" />
<Img src = "image_two.png" style = "position: absolute" />
<Img src = "image_three.png" style = "position: absolute" />
</ Div>

definere stilen klassen "dagens" i overskriften:

<Style type = "text / css">

.current{
z-index:99;
}

</ Style>

Etter den avsluttende body-koden (</ body>) i HTML-siden, har en annen script del som ser slik ut:

<Script>

function imageSwap() {
var $currentImage = $('div#slideshow IMG.current');
var $next = $currentImage .next();

$ Next.addClass ( 'nåværende');

$ CurrentImage.removeClass ( 'nåværende');
}

$ (Funksjon () {
setInterval (& quot; imageSwap () & quot ;, 5000);
});

</ Script>

Etter siden lastes, vil skriptet vise hver av bildene dine i sving. Forsinkelsen er satt av antall millisekunder i setInterval funksjon nær slutten av skriptet. Her er 5000 tilsvarende fem sekunder.

avanserte animasjoner

Når du forstår det grunnleggende HTML5, kan du utforske mer avanserte animasjoner for å gi lysbildefremvisningen mer flash eller polsk. Du kan skrive skript som glir bildene over websiden eller blekner ett bilde til et annet. Du kan tillate brukerne å stoppe lysbildefremvisning, eller bestemme hastigheten. Fordi JQuery kan referere til noe på siden, kan du også inkludere tekst i animasjoner.