jQuery Cycle幻灯片在页面加载时重叠

我在许多项目中使用了jQuery Cycle。这一次，我得到了一个非常奇怪的视觉故障。在页面加载时，所有幻灯片都显示在彼此的顶部，然后当脚本在每张幻灯片中循环时，它最终会自行修复（直到页面重新加载）。例如，代码点击here。下图显示了这似乎在所有浏览器是发生（在Firefox 4，Safari浏览器5，铬10，IE8测试）jQuery Cycle幻灯片在页面加载时重叠

enter image description here 添加一个背景颜色到每个滑动div毛刺不会“修复”该问题，即它隐藏了其他幻灯片，但在我看来这不是一个真正的解决方案。

整个下午都在和这个争斗，我有点亏本。任何帮助将不胜感激。

谢谢

来源

2011-04-22 Adrian Trimble

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

来源

2011-04-22 23:52:49 Todd

不幸的是没有工作。我可能只是为了我的背景色破解。感谢您的尝试！ – 2011-04-23 00:09:03

in div tag use style =“display：none;”除了一个之外，我给他们一个普通的班级名字。你也可以得到主叫的孩子们。在载入时将其更改为“显示：内联”。唯一显示的是没有显示的那个：没有。使用的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>

来源

2011-05-20 21:44:38 Truk

如果你不把你的电话给jQuery的周期在head.js回调

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？

来源

2011-05-21 19:00:13 addedlovely

我使用自定义的过渡也如此，将显示器设置为没有对所有可能除了第一个再加入类似.....

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

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

这将显示的二手之前它的项目！

来源

2011-08-17 13:07:34 Tom

我有同样的问题，但通过跟随特鲁克的答案来设置每张幻灯片显示：无（除了第一个），但不是将其更改为在页面加载时以内联方式显示，而是在循环中执行打电话如下：

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

希望这可以帮助别人出去！

来源

2011-11-10 05:45:37 Chris

jQuery Cycle幻灯片在页面加载时重叠

回答

相关问题