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将第二个图像放在第一个图像的右侧，然后设置一个计时器，通过样式向左拖动图像？

我真的不建议滚动您自己的动画库。精彩的Marcel Laverdet所写的幻灯片使用简单，可以从幻灯片中获得您想要的内容。注意：忽略FBJS的内容，即使你在自己的网站上使用它也是一样的。

如果你不使用框架，我想你会发现很多痛苦。如果你仍然不想使用一个框架，那么至少找一个获得自由许可的框架，看看源代码，比如说

---

基本理论是，是的，你设置了一个定时器，它可以在一定的时间间隔内移动图像，或者是固定的，或者是基于某种数学方程，比如，sin，cos，等等。通过将这些时间间隔设置得很近，并制作很多时间间隔，你可以得到一个javascript动画。通常，您会使用某种绝对定位，将一个元素从屏幕上移开，另一个元素继续移动。

您不想使用框架吗？我不想为小动画合并一个库。更不用说，我在没有图书馆的情况下这么做的全部原因是为了学习基础知识。这真的很痛苦。最好检查动画库中涉及的代码，然后尝试在您自己的代码中复制功能。