幻燈片在Javascript中沒有框架，動畫？

我遇到的問題相當複雜的解釋。我已經寫了顯示圖像幻燈片一個JavaScript，和它的作品相當不錯，儘管使用了更多的資源比我想幻燈片在Javascript中沒有框架，動畫？

// imgArr[] is populated before  
var i = 0; 
var pageLoaded = 0; 
window.onload = function() {pageLoaded = 1;} 

function loaded(i,f) { 
if (document.getElementById(i) != null) f(); 
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100); 
} 

} 

function displaySlideshow() { 
    document.getElementById(destinationId).innerHTML = '<div id="slideWindow"><img src="'+imgArr[i]+'" />' + '<img src="'+imgArr[i + 1]+'" /></div>'; 
    setTimeout('displaySlideshow()',1000*3); 
    i++; 
    if (i >= imgArr.length - 1) 
    i = 0; 
} 
loaded(destinationId,displaySlideshow);

所以，這個腳本動態地將兩個圖像的HTML元素，它是包裹在一個div中。

該div用圖像的高度和寬度進行樣式設置，並且隱藏溢出（第二個圖像）。第二張圖片低於第一張，幻燈片顯示從右向左。

我的詢問有雙重功能： 1）有沒有更有效的方法來做到這一點？ 2）我將如何爲圖像設置動畫？我需要將第二個圖像放在第一個CSS的右側，然後設置一個計時器將圖像（通過樣式）向左拉？

來源

2009-12-11 aaron

你不想使用框架嗎？ – jaywon 2009-12-11 06:43:15

我真的不建議滾動你自己的動畫庫。由美妙的Marcel Laverdet編寫的Facebook Animation Library使用簡單，並附帶a lot of tutorials以獲得您想要的幻燈片。（注意：忽略FBJS的東西，即使你在自己的網站上使用它也是如此）。

來源

2009-12-11 06:42:31 jonchang

我不想爲小動畫合併圖書館。更何況，我沒有圖書館這樣做的全部原因是我可以學習基礎知識。 – aaron 2009-12-11 06:47:32

這真的很痛苦。檢查動畫庫中涉及的代碼會更好，然後嘗試在自己的代碼中複製功能。 – jonchang 2009-12-11 06:52:16

如果你沒有使用框架，我想你會發現很多痛苦您。如果您仍然不想使用框架，至少可以找到一個獲得自由許可的框架，並查看源代碼。例如，Here's one。

基本理論是，你設置了一個定時器，它在某種間隔上移動圖像，要麼是固定的，要麼是基於某種數學方程式（如sin，cos等）。通過將這些時間間隔放在一起並製作很多，您會在javascript中獲得一個「動畫」。通常情況下，你會使用某種絕對定位，隨着另一個元素的移動，將一個元素從屏幕上移開。

來源

2009-12-11 06:49:32 jvenema

幻燈片在Javascript中沒有框架，動畫？

回答

相關問題