我需要在单击“下一个”箭头和“上一个”箭头时滑动背景 - 现在背景位于 #container 元素中 - 但是,这不起作用 - 我试过将背景放在ul#slider 元素 - 但这也不起作用...
我需要的是背景将与 slider 内的 li
一样多......
关于如何做到这一点有什么建议吗?
您可以在这里查看元素:http://www.i-creative.dk/Slider/
谢谢
最佳答案
我已经构建了您所要求的东西,这完全是痛苦的。
问题是,您在谈论每张幻灯片都有不同的背景图像、页面大小。
2个选项是: 1:有一个大背景图像,所有背景水平对齐,并在更改 div 时为 css 背景位置设置动画,以保持匹配。这样的好处是只需要下载一张图片,但是会很大。 问题是:如果您一次跳多个步骤,您会看到所有其他图像;
它要求你使用固定宽度;
如果你只想改变一张幻灯片的背景是一件痛苦的事;
- 在 div 上预加载下一张幻灯片的背景,该 div 是
container
的兄弟但具有更高的 z-index。使用 jquery 将其从适当的一侧滑过现有背景。 这种方法的好处是您可以使用 css 使背景图像始终占据屏幕的整个宽度,或者使用更大的成像器并将其居中。看这里:http://cksk.com举个例子。
长话短说,您无法使用现成的解决方案来解决这个问题,您需要亲自动手。
此外,您需要花费大量时间进行优化。
关于javascript - 使用 AnythingSlider 滑动背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7594737/