jQuery循環插件（通常）在Google Chrome中無效

Question

出於某種原因，當我第一次訪問我創建的最近頁面時，jQuery Cycle插件不起作用。該網站位於here（網站是用不同的語言[希伯來語]）。

無論它使用什麼語言，Cycle插件都可以在Firefox和IE中正常工作。我想知道這是否是我的一個錯誤或者插件結尾的錯誤。

如果這是我的一個錯誤，我該如何解決它？

Answer 1

解決這個問題，基於這樣的事實，谷歌Chrome瀏覽器無法正確渲染動態生成div的高度（如@ ulima69觀察到的），就是給包裝DIV （.slideshow）指定寬度&與圖像寬度/高度一致的高度。

這會修復現在的錯誤。如果圖像的尺寸各不相同，則應尋求更復雜的解決方案。 @ ulima69提供了兩個鏈接到替代循環插件，應該與Chrome一起使用。做什麼適合你。

阿米特

Answer 2

以下是您的快速演示：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>

Answer 3

你必須使用.load代替。就緒，以使圖像在頁面上加載

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