Javascript timelapse-effect：显示30张图片/秒（详细阅读）

Question

我有一位客户为他的投资组合网站制作了他每天拍摄一次365天照片的“视觉日记”。他希望我把这些放在一个延时效应片中。我想过使用Flash，但最终选择了JavaScript。

需要发生的事情是这样的：图像周期真的很快，没有转换或任何东西，只是图像图像等。大约30/fps或类似的东西。当你点击闪烁的图像时，它会停在你选择的图像上，这样用户可以看一看。当您再次单击时，幻灯片将再次开始播放。

我的问题是我是一个PHP/XHTML/CSS的家伙谁也没有真正关于JavaScript的模糊。我可以很高兴地将它集成到任何页面，但它只是编码令我困扰的JavaScript。

在他的主页，我用来显示基本的幻灯片这个代码 - 过渡效果等，这是在HTML，但你可以揣摩出的代码，我敢肯定：

<!-- 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> 

有什么方法来修改此代码来关闭所有过渡效果，并使其停止播放，当你点击/再次启动它？否则，引用一些不同的代码会很有帮助。

谢谢大家！

插孔

Answer 1

您似乎正在使用特定于IE的代码。我建议在专用的JavaScript库中使用各种效果模块，例如MooTools（我个人最喜欢的），jQuery或Prototype + script.aculo.us。

要停止幻灯片播放，你应该能够简单明确超时t：

clearTimeout(t); 

而且，你不应该引述setTimeout第一个参数。通过它函数参考：

setTimeout(runSlideShow, slideShowSpeed);