Jquery循环无法在第一次加载时正确加载样式

使用JQuery Cycle插件时出现问题。我使用它来调用（最终4个，当前）2个代码块内容（图像，链接文本和底部导航）。当我加载要测试的页面时，它仅抛出第一张幻灯片上的样式的第一次调用。抛出的元素有一个位置：它们的相对参数。下面是HTML：Jquery循环无法在第一次加载时正确加载样式

<div class="slide"> 
    <img src="images/cycle_img_test.jpg" /> 
    <figure class="slide_link"> 
    </figure> 
    <p class="slidelink_text">1 View Our Reports</p> 
    <img src="images/slider_arrow.png" class="link_arrow"> 
    <div class="slide_nav"> 
    </div> 
     <div class="slidenav_content"> 
     <p class="nav_left">&lt;</p> 
     <img src="images/slide_nav_current.png" /> 
     <img src="images/slide_nav_other.png" /> 
     <img src="images/slide_nav_other.png" /> 
     <img src="images/slide_nav_other.png" /> 
    <p class="nav_right">&gt;</p> 
     </div> 
</div>

这里是正在调用.slideshow的JS：

<script src="js/cycle.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.slideshow').cycle({ 
       fx: 'fade' // choose your transition type, ex: fade,  scrollUp, shuffle, etc... 
      }); 
     }); 
</script>

并在这里被引用为样式的CSS：

.slide_link { width:217px; height:38px; background:#d2a709; opacity:.4; position:absolute; top:255px; z-index:10; } 

.slidelink_text { vertical-align:center; font:bold 16px carto_bold, arial, helvetica, sans-serif; line-height:18px; letter-spacing:.01em; padding-left:35px; color:#fafafa; position:absolute; top:265px; z-index:11; } 

.slide_nav { background:#3a4c5b; opacity:.6; width:605px; height:33px; position:relative; bottom:63px; left:25px; } 

.slidenav_content { max-width:600; height:33px; position:relative; bottom:89px; left:35px; } 

.slidenav_content img { position:relative; left:245px; } 

.nav_left{ position:relative; float:left; color:#fff; } 

.nav_right{ position:relative; float:right; right:395px; color:#fff; }

如果你能提供任何建议，说明为什么该循环仅在第一张幻灯片的第一个提示上错误地加载样式，我将非常感激。或者即使你能够辨别错误是在CSS还是Js中，肯定会有帮助。

谢谢！

来源

2012-05-17 Matt Zelenak

$（“幻灯片”）似乎并不在你的HTML存在吗？你可以通过wc3验证器在css中看到任何错误，任何js错误应该可以通过IE浏览器获得。 – mmundiff

我相信幻灯片是绕滑动元件他已经证明，但离开了，但问题不是很清楚的包装。 – lucuma

由于没有人回复，我会试试看：

你的问题有点含糊。但你可以使用this demo作为参考。

正如你所看到的，它具有所有元素relative和使用非常简单明了的布局。

您的示例可能无法正常工作，因为在调用cycle函数时缺少相干参数，因此它会干扰您希望显示HTML的方式。

祝你好运。

来源

2013-07-03 21:34:27

如果您使用的是“随机”和/或“超时”，在幻灯片插件选项，则可能需要使用黑客工具，第一隐藏的幻灯片，然后显示它并加载它尝试。例如：

$('.slideshow').hide();

在凝视插件之前。所以它会是这样：

<script> 
$('.slideshow').hide(); 
$(document).ready(function() { 
$('.slideshow').show(); 
     $('.slideshow').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
    }); 
</script>

如果仅风格坚持在第一面板上，而不是放在下面，那么它可能是CSS问题。

来源

2014-04-16 20:33:14 morespace54

Jquery循环无法在第一次加载时正确加载样式

回答

相关问题