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幻燈片在頁面加載時重疊

回答

相關問題