 PHP expert |
|
jQuery is niet zo moeilijk  . Ik zou de images plaatsen maar de display van de eerste moet op block staan. De andere staan op none. Daaronder die drie thumbnails met <a> tag daarrond. Wanneer er daarop geklikt wordt, dan moet de timer (lees verder) herstart worden en moet een functie (volgendeAfbeelding()) getoond worden.
De timer moet gestart worden wanneer het document geladen is (dus load event). Als de timer afgaat, dan roep je gewoon de functie volgendeAfbeelding op. De tijd van de timer moet je zelf maar instellen (1,2,3,...seconden).
In die functie volgendeAfbeelding wordt de timer stop gezet, wordt de volgende afbeelding gekozen (dat is de volgende afbeelding in de array, dat kan je simpel doen met een pointer variabele en module de size van je array => lastige zin, maar in JS code komt dit op het volgende neer arr[i%3]). Daarna doe je een fadeout op de huidige image, en een fadein op de nieuwe image.
<div id="img-container">
<img src="images/1.png" id="image_1" style="display:block;" />
<img src="images/1.png" id="image_2" style="display:none;" />
<img src="images/1.png" id="image_3" style="display:none;" />
</div>
...thumbnails...
<img src="images/1.png" id="image_1" style="display:block;" /> <img src="images/1.png" id="image_2" style="display:none;" /> <img src="images/1.png" id="image_3" style="display:none;" /> ...thumbnails...
Dan heb je volgende JS code ongeveer. Je moet de ontbrekende stukken maar zelf in programmeren. Ik gebruik setTimeout, ik ken de jQuery api niet zo goed.
var images = ["image_1", "image_2, "image_3];
var p = 0; //pointer
var seconds = 2;
var timer = setTimeout("volgendeAfbeelding()", seconds*1000);
function volgendeAfbeelding()
{
document.getElementById(images[p%images.length]).fadeout(500);
document.getElementById(images[++p%images.length]).fadein(500);
}
var images = ["image_1", "image_2, "image_3]; var p = 0; //pointer var seconds = 2; var timer = setTimeout("volgendeAfbeelding()", seconds*1000); function volgendeAfbeelding() { document.getElementById(images[p%images.length]).fadeout(500); document.getElementById(images[++p%images.length]).fadein(500); }
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
