jQuery循环插件(通常)在Google Chrome中不起作用

时间:2011-10-16 21:38:02

标签: javascript jquery google-chrome cycle-plugin

出于某种原因,当我第一次进入我构建的最近页面时,jQuery Cycle插件不起作用。该网站位于here(网站使用其他语言[希伯来语])。

无论使用何种语言,Cycle插件在Firefox和IE中都能正常运行。我想知道这是我的错误还是插件的错误。

如果这是我的错误,我该如何解决?

3 个答案:

答案 0 :(得分:4)

这个问题的解决方案,基于谷歌Chrome无法正确渲染动态生成的div的高度(如@ ulima69观察到的),是给包装div(.slideshow)一个指定的宽度&安培;高度与图像的宽度/高度一致。

现在修复了这个bug。如果图像都是不同的尺寸,则应寻求更复杂的解决方案。 @ ulima69提供了两个指向 与Chrome一起使用的替代循环插件的链接。做什么对你有用。

阿米特

答案 1 :(得分:4)

您必须使用.load而不是.ready来允许图像加载到页面上

$(window).load(function() {
    $('.element').cycle();
});

答案 2 :(得分:0)

以下是您的快速演示:http://jsfiddle.net/VpnPb/4/。我使用过jQuery 1.6.4,一切都可以正常使用不同的图像尺寸。

$('#s5').cycle({
  fx: 'fade',
  pause: 1
});

$('#s6').cycle({
  fx: 'scrollDown',
  random: 1
});
.pics {
  height: 232px;
  width: 232px;
  padding: 0;
  margin: 0;
}

.pics img {
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0
}
<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>

<div id="s5" class="pics">
  <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
<br/>

<div id="s6" class="pics">
  <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>