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);