使用 AnythingSlider 幻灯片背景

Question

单击“下一个”箭头和“上一个”箭头时，我需要滑动背景 - 现在背景位于 #container 元素中 - 但是，这不起作用 - 我尝试将背景放在 ul#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 示例。

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

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

Answer 2

试试这个CSS...

#slider {
    width: 472px; /* divided the width of the background image by 4 (# of panels) */
    height: 570px;
    list-style: none;
    /* start background after the initial cloned panel: 472px to match panel width */
    background: transparent url(../images/background.png) 472px 0 repeat-x;
}

/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
    background: transparent url(../images/background.png) 0 0 repeat-x !important;
}

/* Make the background visible */
div.anythingSlider .anythingWindow {
    overflow: visible !important;
}

唯一的问题是UL的宽度是有限的，所以当你到达最后一个面板时，背景结束，但一旦你点击右箭头，背景就会重新出现。