使用javascript进行幻灯片放映,无需绝对定位

时间:2010-04-07 15:58:45

标签: javascript css slideshow

我需要这样的东西 http://jonraasch.com/blog/a-simple-jquery-slideshow

但没有绝对定位。 可能吗?

如果没有,我如何处理绝对定位 - 如果我将其置于一个屏幕res的中心,则不会是另一个屏幕。有什么提示吗?

1 个答案:

答案 0 :(得分:4)

每当您需要将图像放在另一个图像上时,您可以通过以下两种方式之一进行操作:

1)使用绝对定位

幻灯片应包含在具有position:relative的包装元素中,然后幻灯片的内容使用position:absolute。布局不会受到影响,因为“绝对”元素位于包装器内部,相对于包装器而不是页面的其余部分

2)在具有背景图像的元素顶部使用一个图像

您可以通过这种方式轻松制作幻灯片:

  • 将背景图像设置为第一帧
  • 淡入背景顶部的图像(第二帧)
  • 将背景设置为与第二帧相同的图像
  • 隐藏第二帧
  • 将第二帧的SRC交换为第三张图像
  • 重复