javascript - jQuery 循环插件（通常）在 Google Chrome 中不起作用

Question

出于某种原因，当我第一次访问我最近构建的页面时，jQuery Cycle 插件不起作用。该站点位于此处（站点使用不同的语言 [希伯来语]）。

无论使用哪种语言，Cycle 插件都可以在 Firefox 和 IE 中正常工作。我想知道这是我端的错误还是插件端的错误。

如果这是我的错误，我该如何解决？

Answer 1

基于 Google Chrome 无法正确呈现动态生成的 div 的高度（如@ulima69 观察到的那样），此问题的解决方案是为包装 div ( .slideshow) 提供与图像一致的指定宽度和高度' 宽度/高度。

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

阿米特

Answer 2

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

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

Answer 3

这是一个快速演示：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>