Beelden die automatisch veranderen zijn inherent interessant om naar te kijken, waardoor ze ideaal voor het houden van kijkers op uw website. Afbeelding fietsen vereist slechts een paar lijnen van JavaScript. Een benadering is gebaseerd op de setInterval instructie, die elke functie die u op gezette tijden kan worden uitgevoerd. Om te plaatsen uw afbeeldingen gemakkelijk op de gewenste locatie op de webpagina weergegeven, opgeven van de locatie coördinaten met de eigenschappen van het boven- en linkerkant van CSS
Open Kladblok en plak de volgende HTML-instructies in het document. Deze verklaringen definiëren een fundamentele, lege webpagina waarin u instructies voor het weergeven van cyclische afbeeldingen kunt invoegen:
Plak de volgende instructies na de
HTML-code. Deze code definieert een tijdelijke aanduiding voor een afbeeldingsbestand met de naam "b1.jpg." Hoewel deze verklaring hardcoded is, kunnen verklaringen van JavaScript en CSS wijzigen van de voorlopige afbeelding positie en inhoud:![]()
Plak de volgende instructies JavaScript net boven de
label. De verklaringen van de voorafgaand aan de changeImage functie Maak afbeelding variabelen voor die functie, en gebruik vervolgens setInterval functie aan te roepen dat op gezette tijden. De functie changeImage gebruikt de instructie document.getElementById afbeeldingen invoegen uit de matrix van de myImages in de
tag:
Plak de volgende CSS-instructies onmiddellijk onder de
label. Deze verklaringen wijzen op de locatie van de pagina'stag, in eenheden van pixels. Deze locatie kan zich overal dat u opgeven. Typ de waarden van het 230 en 200 hier weergegeven met verschillende waarden--ruwweg van nul tot 800 voor de eigenschap van de Top, en nul tot 1000 voor de eigenschap Left. De beeldschermresolutie van de PC of ander apparaat dat uw webpagina toont ingesteld van het bereik, en daarom zal variëren. Wel wordt alle apparaten weergegeven in de afbeeldingen in de hogere linkerhoek als u typt '0' voor zowel de bovenkant en de linkerkant eigenschappen:
Sla het bestand met de extensie '.htm' en Kopieer vier afbeeldingen opeenvolgend genummerd, vanaf "b1.jpg" door "b4.jpg" in dezelfde map.
Open de webpagina in de webbrowser om de voortdurend veranderende beelden te bekijken.
- Houd altijd in mening om te zoeken naar foto's die gratis te gebruiken, of zijn onder wat heet de Creative Commons licentie. Anders, u kan worden schenden van iemands "intellectuele-eigendomsrechten." Hoewel het vaak wordt gedaan - mensen van andere mensen beelden hele tijd stelen - is het eigenlijk een misdaad, en niet te vergeten een crummy ding om te doen. Er is meer dan genoeg materiaal daar gezien weg kostenloos.
- Informatie in dit artikel is van toepassing op HTML 5. Iets of aanzienlijk kan variëren met andere versies.
