javascript - 没有绝对定位的javascript幻灯片放映

标签 javascript css slideshow

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

但没有绝对定位。 是否可以?

如果不是,我该如何处理绝对定位——如果我让它以一个屏幕分辨率为中心,它就不会以另一个屏幕分辨率为中心。有什么建议吗?

最佳答案

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

1)使用绝对定位

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

2) 在具有背景图片的元素之上使用一张图片

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

  • 将背景图片设置为第一帧
  • 淡入位于背景之上的图像(第二帧)
  • 将背景设置为与第二帧相同的图像
  • 隐藏第二帧
  • 将第二帧的SRC换成第三张图片
  • 重复

关于javascript - 没有绝对定位的javascript幻灯片放映,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2593944/

相关文章:

html - 为什么不能在带逗号的长字符串上打断单词?

css - One Plus X 设备的媒体查询是什么?

javascript - 使用 jQuery Slider 使用淡入淡出方式擦洗图像

html - CSS3 动画滞后

javascript - setInterval 数组

javascript - UIWebView 上的夜间模式问题

jquery - 我的for循环有什么问题

jquery - 如何在 png 中定位 jQuery 幻灯片

javascript - Angular 和 JSON 交互?

javascript - 去匿名化 jQuery 中的匿名函数