javascript - 任何滑块 FX 问题

Question

我正在尝试将各种FX与AnythingSlider（在这种情况下特别是左、右和淡入淡出）一起使用并遇到一些问题。将所有幻灯片设置为“淡入淡出”FX，一切似乎都可以正常工作（请参见下面的链接）：

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_fade.html

但是，当所有幻灯片都设置为“左”或“右”FX 时，幻灯片在旋转时会不同步（请参阅下面的链接）：

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_right.html

知道发生了什么吗？

提前致谢！

Answer 1

问题是整个面板都被动画化了。因此，当最后一个或下一个取决于方向的面板移出视图时，它实际上最终会与当前面板重叠。所以你有两个选择：

1. 将面板的内容包装在一个元素中并将其定位为动画。这将起作用的原因是面板本身具有overflow:hidden应用到它的属性，因此内容不会与其他面板重叠。

   <div class="left">
     <div class="content-wrapper"> <!-- add this content wrapper -->
       <div class="caption"></div>
       <img src="../slide1.jpg" alt="" />
     </div>
   </div>
   

2. 添加.activePage { z-index: 1; }到您的CSS。这是有效的，因为当前面板将始终位于顶部。此解决方案的主要问题是您会看到其他面板在后台奇怪地移动。