0

我遇到的问题解释起来相当复杂。我编写了一个显示图像幻灯片的 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）我将如何为图像设置动画？我是否需要以某种方式将第二个图像放在第一个图像的右侧，然后设置一个计时器将图像（通过样式）向左拉？

4

2 回答 2

0

我真的不建议滚动你自己的动画库。由精彩的 Marcel Laverdet 编写的Facebook 动画库易于使用，并附带大量教程，可让您从幻灯片中获得想要的内容。（注意：忽略 FBJS 的东西，即使你在自己的网站上使用它也是一样的。）

于 2009-12-11T06:42:31.107 回答
0

如果您不使用框架，我认为您会发现很多痛苦。如果您仍然不想使用框架，至少找到一个获得自由许可的框架，并查看源代码。例如，这是一个。

基本理论是，是的，您设置了一个计时器，以某种间隔移动图像，无论是固定的还是基于某种数学方程（例如，sin、cos 等）。通过将这些间隔设置在一起并制作很多，您可以在 javascript 中获得“动画”。通常，您会使用某种绝对定位，将一个元素移出屏幕，而另一个元素继续移动。

于 2009-12-11T06:49:32.370 回答