Javascript content slideshow
Ik heb de opdracht gekregen om een website te ontwerpen voor een atletiekvereniging. Nu zou ik het wel mooi vinden om op die site een content slider te maken. Zoeentje die je misschien kent van insidegamer.nl, ign.com of oranje.nl
Je ziet ze steeds vaker. Dit wil ik graag met Javascript realiseren. Ik wil switchen tussen 3 artikelen. Dan zou ik het in zo'n array zetten:
article_titel[0] = 'Trainingen zijn weer begonnen';
article_undertitle[0] = 'En het werd tijd!';
article_image[0] = 'artikel0.jpg';
(x3)
die inhoud haalt ie dan via PHP uit de database 'artikelen'. (de laatste 3 artikelen oid).
Ik wil graag dat de inhoud om de zoveel seconden verspringt. Iemand een idee hoe ik dat zou kunnen maken?
var tekst = new Array();
tekst[0] = 'Machtig mooi';
tekst[1] = 'Dit gaat op tijd';
tekst[2] = 'En deze ook';
var current = 0;
function advance(){
if(tekst[current]) {
document.getElementById("tekst").innerHTML = tekst[current];
}
current++;
}
var the_show = "";
function startShow() {
the_show = setInterval("advance();", 5000);
};
<body onLoad="startShow()">
<div id="tekst"></div>
Wat hier het probleem is, is dat er op het begin nog niets wordt laten zien. Pas na 5 seconden. Het eerste artikel zou dus in die div moeten staan bij het laden van de pagina, maar die wil ik liever vanuit de array geladen hebben.
Ook springt ie nog niet van 3 terug naar 1.