1

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

我需要的是背景将与滑块li内部一样多...

关于如何做到这一点的任何建议？

你可以在这里看到这个项目：http ://www.i-creative.dk/Slider/

谢谢

4

2 回答 2

0

试试这个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 的宽度是有限的，所以当你到达最后一个面板时，背景会结束，但一旦你点击右箭头就会重新出现。

于 2011-09-29T21:17:57.483 回答
0

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

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

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

它要求您使用固定宽度；

如果您只想更改一张幻灯片的背景，那会很痛苦；

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

长话短说，你不会使用现成的解决方案来实现这一点，你需要亲自动手。

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

于 2011-09-29T09:18:04.187 回答