Effet timelapse Javascript: afficher 30 images/seconde (lire pour plus de détails)

Question

J'ai un client qui a fait un 'Journal visuel' des photos qu'il a prises une fois par jour pendant 365 jours, pour son site portfolio. Il veut que je les mette ensemble dans un morceau d'effet time-lapse. J'ai pensé à utiliser Flash mais à la fin j'ai opté pour JavaScript.

Ce qui doit arriver est ceci: Les images tournent vraiment très rapidement sans transitions ou quoi que ce soit, juste image-image-image etc. Environ 30/fps ou quelque chose comme ça. Lorsque vous cliquez sur les images qui clignotent, il s'arrête sur l'image que vous avez sélectionnée, afin que l'utilisateur puisse y jeter un coup d'œil. Lorsque vous cliquez à nouveau, le diaporama recommence à jouer.

Mon problème est que je suis un mec PHP/XHTML/CSS qui n'a pas vraiment la moindre idée de JavaScript. Je peux facilement l'intégrer dans n'importe quelle page, mais c'est juste coder le JavaScript qui me dérange.

Sur sa page d'accueil, je le code utilisé pour afficher un diaporama de base - avec des effets de transition, etc. Il est dans le code HTML, mais vous pouvez comprendre le code, je suis sûr:

<!-- Code for slideshow --> 
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 --> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
// Set slideShowSpeed (milliseconds) 
var slideShowSpeed = 3000; 
// Duration of crossfade (seconds) 
var crossFadeDuration = 3; 
// Specify the image files 
var Pic = new Array(); 
// to add more images, just continue 
// the pattern, adding to the array below 

Pic[0] = '1.jpg' 
Pic[1] = '2.jpg' 
Pic[2] = '3.jpg' 
Pic[3] = '4.jpg' 
Pic[4] = '5.jpg' 
Pic[5] = '6.jpg' 
Pic[6] = '7.jpg' 
Pic[7] = '8.jpg' 
Pic[8] = '9.jpg' 
Pic[9] = '10.jpg' 
Pic[10] = '11.jpg' 
Pic[11] = '12.jpg' 
Pic[12] = '13.jpg' 
Pic[13] = '14.jpg' 
Pic[14] = '15.jpg' 
Pic[15] = '16.jpg' 
Pic[16] = '17.jpg' 
Pic[17] = '18.jpg' 
Pic[18] = '19.jpg' 
Pic[19] = '20.jpg' 

// do not edit anything below this line 
var t; 
var j = 0; 
var p = Pic.length; 
var preLoad = new Array(); 
for (i = 0; i < p; i++) { 
preLoad[i] = new Image(); 
preLoad[i].src = Pic[i]; 
} 
function runSlideShow() { 
if (document.all) { 
document.images.SlideShow.style.filter="blendTrans(duration=2)"; 
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; 
document.images.SlideShow.filters.blendTrans.Apply(); 
} 
document.images.SlideShow.src = preLoad[j].src; 
if (document.all) { 
document.images.SlideShow.filters.blendTrans.Play(); 
} 
j = j + 1; 
if (j > (p - 1)) j = 0; 
t = setTimeout('runSlideShow()', slideShowSpeed); 
} 
// End --> 
</script> 

Y at-il façon de modifier ce code pour désactiver tous les effets de transition, et le faire arrêter de jouer lorsque vous cliquez dessus/le relancer? Sinon, une référence à un code différent serait utile.

Merci à tous!

Jack

Answer 1

Vous semblez utiliser du code spécifique à IE. Je recommande d'utiliser les différents modules d'effets dans une bibliothèque JavaScript dédiée, telle que MooTools (mon favori personnel), jQuery ou Prototype + script.aculo.us.

Pour arrêter le diaporama, vous devez être en mesure de délai simplement clair t:

clearTimeout(t); 

En outre, vous ne devriez pas citer le premier paramètre de setTimeout. Passez-lui une référence de fonction:

setTimeout(runSlideShow, slideShowSpeed);