使用jQuery循环（）幻灯片显示的间歇性定位问题

Question

这在Chrome，Firefox，特别是Safari中间歇性地发生。在IE中没有观察到。幻灯片显示从顶部比通常更远，但按预期运行。更频繁地发生在硬刷新上，使其看起来像是document.ready（）问题。

Page在这里：http://privatecare.dreamhosters.com/

正确加载：

错误加载：

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;
}

之前有人见过这个或有任何建议？

Answer 1

我最好的猜测是，这是一种奇怪的种族状况。在循环插件中有一个区域，用于检查指定的元素（#homeSlides）是否具有非静态位置。如果没有，循环将应用以下CSS（宽度和高度值显然特定于您的实现）：

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

此CSS应用于元素的内联样式属性，该属性将覆盖样式表中声明的样式。如果您可以在Chrome中使其中断，请检查#homeSlides，您将看到内联样式。禁用内嵌position: relative;并观察它移动到正确的位置。

您可以通过简单地将!important添加到main.css中的position: absolute;声明来解决此问题。

您也可以通过在循环插件完成初始化后在javascript中将位置设置为绝对来修复它。

修改

结帐this question。您应该删除该重要声明，并在所有脚本之前包含所有CSS文件。在CSS有时间应用之前，脚本正在执行。