用jQuery循環（）幻燈片顯示間歇性定位問題

這種情況在Chrome，Firefox和Safari中間歇性發生。在IE中沒有觀察到。幻燈片顯示比通常情況下更進一步，但按照預期發揮作用。硬刷新更經常發生，看起來像是document.ready（）問題。用jQuery循環（）幻燈片顯示間歇性定位問題

頁是在這裏：http://privatecare.dreamhosters.com/

正確的負載：

correct load

不正確的負載：

incorrect load

jQuery的初始化：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#homeSlides').cycle({ 
     fx: 'fade', 
     speed: 2500 
    }); 
    }); 
</script>

HTML：

<div id="homeSlides"> 
<img src="/g/home/slide1.jpg" alt="Connecting You to Better Care" width="639" height="348" onclick='window.location="/why_choose_pca"' /> 
<img src="/g/home/slide2.jpg" width="639" height="348" alt="Updates on DOL’s Proposed Amendments to Companionship and Live-In Worker Regulations" border="0" onclick='window.location="/dol-issue-updates"' /> 
<img src="/g/home/slide3.jpg" alt="Promoting the Rights of Independent Caregivers and Registries Since 1977" width="639" height="348" onclick='window.location="/caregivers"' /> 
<img src="/g/home/slide4.jpg" alt="The Consumer-Directed Model Puts You in Control" width="639" height="348" onclick='window.location="/comparing_your_options"' /> 
<img src="/g/home/slide5.jpg" alt="Join us in Orlando October 10 – 12 for the PCA Annual Conference" width="639" height="348" onclick='window.location="/annual-conference"' /> 
</div>

CSS

#homeWrapper { 
    position:relative; 
    margin:0 auto; 
    width:951px; 
    background: url(../g/home_bg.jpg) no-repeat; 
    min-height:888px; 
} 

#homeSlides { 
    position:absolute; 
    left:290px; 
    top: 143px; 
    width:639px; 
    height:348px; 
    overflow:hidden; 
    cursor:pointer; 
}

沒有人見過這或有什麼建議？

來源

2012-04-17 jerrygarciuh

難道是你的圖片尚未加載導致這種差距？你也可以在你的週期中加入鏈接，比如''，而不是那個'onclick = window.location'強迫性的精神錯亂... – JKirchartz 2012-04-17 18:38:38

我的強迫性瘋狂是否會影響這個位置？ ;） – jerrygarciuh 2012-04-17 18:44:04

沒了...只是評論：P ...順便說一句，這個差距是相同的高度，在左邊欄中，首先圖像上subnav ... – JKirchartz 2012-04-17 18:45:08

我最好的猜測是這是一種奇怪的競爭條件。在循環插件中，有一個區域會檢查您的指定元素（#homeSlides）是否具有非靜態位置。如果沒有，循環將採用下面的CSS（寬度和高度值都明顯特定於您的實現）：

position: relative; width: 639px; height: 348px;

這個CSS被應用到覆蓋在宣佈你的風格元素的內嵌樣式屬性樣式表。如果您可以在Chrome瀏覽器中打開它，請檢查#homeSlides，您將看到內聯樣式。禁用內聯position: relative;並觀察它移動到正確的位置。

您可以通過簡單地將!important添加到main.css中的position: absolute;聲明來解決此問題。

您可能還能夠通過循環插件完成初始化後的位置中的JavaScript設置絕對解決它。

編輯：

退房this question。您應該刪除重要的聲明並在所有腳本之前包含所有CSS文件。在CSS有時間應用之前，腳本正在執行。

來源

2012-04-17 18:59:45

你搖滾！！重要的訣竅！下一次你在新奧爾良時，我欠你一杯啤酒！ – jerrygarciuh 2012-04-17 19:04:53

@jerrygarciuh乾杯隊友！檢查我的編輯以獲得更好的解決方案 – 2012-04-17 19:10:19

用jQuery循環（）幻燈片顯示間歇性定位問題

回答

相關問題