javascript - 使用 AnythingSlider 滑动背景

Question

我需要在单击“下一个”箭头和“上一个”箭头时滑动背景 - 现在背景位于 #container 元素中 - 但是，这不起作用 - 我试过将背景放在ul#slider 元素 - 但这也不起作用...

我需要的是背景将与 slider 内的 li 一样多......

关于如何做到这一点有什么建议吗？

您可以在这里查看元素:http://www.i-creative.dk/Slider/

谢谢

Answer 1

我已经构建了您所要求的东西，这完全是痛苦的。

问题是，您在谈论每张幻灯片都有不同的背景图像、页面大小。

2个选项是:1:有一个大背景图像，所有背景水平对齐，并在更改 div 时为 css 背景位置设置动画，以保持匹配。这样的好处是只需要下载一张图片，但是会很大。问题是:如果您一次跳多个步骤，您会看到所有其他图像；

它要求你使用固定宽度；

如果你只想改变一张幻灯片的背景是一件痛苦的事；

1. 在 div 上预加载下一张幻灯片的背景，该 div 是 container 的兄弟但具有更高的 z-index。使用 jquery 将其从适当的一侧滑过现有背景。这种方法的好处是您可以使用 css 使背景图像始终占据屏幕的整个宽度，或者使用更大的成像器并将其居中。看这里:http://cksk.com举个例子。

长话短说，您无法使用现成的解决方案来解决这个问题，您需要亲自动手。

此外，您需要花费大量时间进行优化。