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

发布于 2024-11-02 19:27:54 字数 501 浏览 3 评论 0原文

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

在此输入图像描述向每个幻灯片添加背景颜色确实“修复”了隐藏其他幻灯片的问题，但在我看来这并不是一个真正正确的解决方案。

整个下午都在与这个问题作斗争，我有点不知所措。任何帮助将不胜感激。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无妨# 2024-11-09 19:27:55

在 div 标签中使用 style="display:none;"除了一个之外，我都给它们起了一个共同的类名。您也可以获取调用 div 的子级。加载时将其更改为“display:inline”。唯一显示的是没有显示的：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>

in the div tag use style="display:none;" on all but one, and I gave them all a common class name. You could just get the children of the calling div too. On load change it to "display:inline". The only one to show is the one with no display:none.

Example using img tags, same principle:

<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>

回复收藏 0 原文

沒落の蓅哖 2024-11-09 19:27:55

您是否应该将 jQuery Cycle 的调用放在 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？

Should you not put your call to jQuery Cycle in the callback of 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();
});

Or just do away with head.js seeing as your not using any html5 /css3?

回复收藏 0 原文

日暮斜阳 2024-11-09 19:27:54

我使用自定义过渡来做到这一点，将显示设置为无，除了第一个，然后添加类似的内容......

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

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

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

I did it using a custom transition, set the display to none on all except maybe the first then add something like .....

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

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

This will show the item just before it's used!

回复收藏 0 原文

温柔嚣张 2024-11-09 19:27:54

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

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

希望这可以帮助别人！

I had the same problem, but fixed it by following Truk's answer in setting each slide to display: none (except the first one), but instead of changing it to display inline on page load, you do it in the cycle call as follows:

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

Hope this helps someone else out!

回复收藏 0 原文