jQuery Cycle Slides在页面加载时重叠

Question

我在很多项目中都使用了jQuery Cycle。这一次我得到了一个非常奇怪的视觉故障。在页面加载时，所有幻灯片都显示在彼此之上，然后当脚本循环遍历每张幻灯片时，它最终会自行修复（直到重新加载页面）。有关示例和代码，请单击here。下图显示了所有浏览器中出现的故障（在Firefox 4，Safari 5，Chrome 10，IE8中测试）

为每张幻灯片添加背景颜色div可以“修复”问题，因为它会隐藏其他幻灯片，但在我看来，它并不是一个真正合适的解决方案。

整个下午一直在与这场斗争，我有点失落。任何帮助将不胜感激。

由于

Answer 1

我是使用自定义转换完成的，将显示设置为none，除了第一个然后添加类似.....

jQuery(document).ready(function($) { 

$('.fade').cycle({ 
fx: 'custom', 
cssBefore: { top: 420, display: 'inline' }, 
animIn:  { top: 0 }, 
animOut: { top: -420 } 
}); });

这将在使用之前显示该项目！

Answer 2

我遇到了同样的问题，但是通过按照Truk的答案设置每张幻灯片来修复它：无（第一个除外），但不是改变它以在页面加载时显示内联，而是在循环调用中执行如下：

 $(document).ready(function(){
    $('#header-content').cycle({
        fx: 'custom', 
          cssBefore: { left: 384, display: 'block' }, 
          animIn:  { left: 0}, 
          animOut: { left: -384 }
    });
})

希望这可以帮助其他人！

Answer 3

添加显示：无;到幻灯片，以便它们不会在页面加载时显示。

Answer 4

div标签中的

使用style =“display：none;”除了一个之外，我给了他们一个共同的班级名称。你也可以得到主叫div的孩子们。在加载时将其更改为“display：inline”。唯一显示的是没有显示的那个：无。

使用img标签的例子，原理相同：

<div class="fadeit" id="thisisit" style="float: left; padding: 5px; height: 320px; width: 240px;">
<img height="320" width="240" class="andy" style="display: none;" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" alt="" />
<img height="320" width="240" class="andy" style="display: none;" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" alt="" />
<img class="andy" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" alt="" />  

<script language="javascript" type="text/javascript"> 

 window.onload=function() { 
  $('.andy').css('display','inline');

  $('.fadeit').cycle({ 
   fx:     'fade', 
   speed:   300, 
   timeout: 3000, 
   next:   '.fadeit', 
   pause:   1 ,
  slideExpr: 'img.andy'
}); };

</script></div>

Answer 5

你是否应该在head.js的回调

中调用jQuery Cycle

head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js", "js/jquery.cycle.lite.min.js", function() {
      $('#featured').cycle();
});

或者只是取消head.js看到你没有使用任何html5 / css3？