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

Question

J'ai un client qui a fait un « journal visuel » de photographies qu'il a pris une fois par jour pendant 365 jours, pour son site de portefeuille. Il veut mettre cela ensemble dans un effet time-lapse morceau. Je pensais à l'aide de Flash, mais à la fin opté pour JavaScript.

Ce qui doit arriver est la suivante: Le cycle des images vraiment très rapidement sans transitions ou quoi que ce soit, juste l'image image image etc. Environ 30 / ips ou quelque chose comme ça. Lorsque vous cliquez sur les images clignotantes, il arrête sur l'image que vous avez sélectionné, l'utilisateur peut regarder. Lorsque vous cliquez à nouveau, le diaporama commence à jouer à nouveau.

Mon problème est que je suis un type PHP / XHTML / CSS qui n'a pas vraiment la moindre idée sur JavaScript. Je peux heureusement l'intégrer dans une page, mais il est tout simplement le codage du JavaScript qui me troublant.

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>

Est-il possible de modifier ce code pour désactiver tous les effets transitoires et faire arrêter la lecture lorsque vous cliquez dessus / démarrer à nouveau? Dans le cas contraire, une référence à un code différent serait utile.

Merci à tous!

Jack

Answer 1

Vous semblez être en utilisant le code spécifique à IE. Je recommande d'utiliser les différents modules d'effets dans une bibliothèque JavaScript dédiée tels que MooTools (mon préféré), jQuery , ou Prototype + script.aculo.us .

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

clearTimeout(t);

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

setTimeout(runSlideShow, slideShowSpeed);