Hoe maak je een Web-pagina afbeelding wijzigen met tijd

Hoe maak je een Web-pagina afbeelding wijzigen met tijd


Als uw Web-pagina saai of ook overvol met afbeeldingen is, overwegen kunt u uw afbeeldingen op te slaan in een diavoorstelling. Met behulp van dynamische beelden die na verloop van tijd veranderen kan interessanter en verhogen hoeveel bent u in staat om te laten zien met beperkte ruimte. Hoewel er talloze benaderingen voor het maken van dynamische beelden binnen een Web-pagina, is misschien wel het meest eenvoudig met behulp van de eenvoudige verzameling van codering methoden gezamenlijk bekend als HTML5.

Het dynamische Web

Hypertext Markup Language of HTML, is de oorspronkelijke taal van het World Wide Web. HTML bestaat uit markup die beschrijft hoe een browser de tekst van een pagina wordt weergegeven. Vroege versies van HTML niet mogelijk voor veel dynamiek of interactiviteit binnen de browser, maar dat als het Web geƫvolueerd snel veranderd. Oorspronkelijk, ontwikkelaars weergegeven dynamische inhoud door middel van plug-in software zoals Java-Applets, Flash of Silverlight, maar vandaag de meeste browsers aankan native HTML5, die is ontworpen met dynamische inhoud in het achterhoofd. HTML5 is gewoon een combinatie van gespecialiseerde labels, een uitgebreide stijl en lay-out taal, genaamd Cascading Style Scripts en een scripttaal genaamd JavaScript waarmee de code kan worden uitgevoerd in browsers.

De bibliotheek JQuery

Om de veranderende afbeeldingen op een webpagina weergeven, hoeft u niet te schrijven van een script van de volledige animatie vanaf nul. Meerdere bibliotheken bestaan waardoor animatie eenvoudig te doen. De meest gebruikte JavaScript library wordt JQuery genoemd. JQuery JavaScript-syntaxis vereenvoudigt en bevat veel kant en klare functies, waaronder een aantal voor het animeren van beelden. Als u wilt gebruiken de bibliotheek JQuery, u kunt downloaden van de bibliotheek en host het zelf of u kunt verwijzen naar een bibliotheek die Google als host fungeert voor algemeen gebruik. Net omvatten de volgende in de sectie van uw HTML-header:

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

Een diavoorstelling Script

U kunt een eenvoudige afbeelding swap met behulp van CSS en een korte script instellen. Ten eerste, in uw HTML-pagina, weergeven van de afbeeldingen met code die als dit kijkt:

< div id = "slideshow" >
< img src="image_one.png" stijl = "position: absolute" class = "huidige" / >
< img src="image_two.png" stijl = "position: absolute" / >
< img src="image_three.png" stijl = "position: absolute" / >
< / div >

In de kop, de "huidige" stijl-klasse te definiƫren:

< stijl type = "text/css" >

.current{
z-index:99;
}

< / style >

Na het sluiten lichaam label (< / body >) opnemen in uw HTML-pagina, een andere script sectie die als dit kijkt:

< script >

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

$next.addClass('current');

$currentImage.removeClass('current');
}

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

< / script >

Nadat uw pagina is geladen, wordt het script elk van uw beelden op hun beurt weergegeven. De vertraging is ingesteld door het aantal miliseconden in de setInterval functie in de buurt van het einde van het script. Hier, is 5000 het equivalent van vijf seconden.

Geavanceerde animaties

Zodra u de basisprincipes van HTML5 begrijpt, kunt u meer vooraf animaties als u wilt geven uw diavoorstelling meer flash of Pools verkennen. U kunt script schrijven dat dia's van beelden op de Web-pagina of een beeld vervaagt naar de andere. U kunt uw gebruikers toestaan om te stoppen met de slide show, of de snelheid bepalen. Omdat JQuery naar iets op de pagina verwijzen kan, kunt u zelfs tekst opnemen in uw animaties.