Jquery 循环在第一次加载时未正确加载样式
Jquery cycle not loading styles correctly on first load
在使用JQuery Cycle插件时遇到问题。我正在使用它来调用(目前最终为 4 个)2 个内容代码块(图像、链接文本和底部导航)。当我加载页面进行测试时,它仅在第一张幻灯片上抛出对样式的第一次调用。被抛出的元素上有一个位置:相对参数。这是 HTML:
<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"><</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">></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中,也肯定会有所帮助。
谢谢!
由于没有人回应,我会试一试:
你的问题有点模糊。但是您可以使用此演示作为参考。
如您所见,它具有relative
的所有元素,并使用非常清晰和简单的布局。
您的示例可能无法正常工作,因为调用 cycle
函数时缺少一致的参数,以至于它会干扰您希望 HTML 的显示方式。
祝你好运。
如果您在幻灯片插件中使用"随机"和/或"超时"选项,您可能需要尝试使用首先隐藏幻灯片然后显示并加载它的黑客。前任:
$('.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 问题。
相关文章:
- 跟踪在页面加载时应用内联样式的JavaScript
- DataTables-创建自定义分页样式(加载更多样式)
- 对插件初始化后动态加载的元素进行样式设置
- jQuery Mobile样式从另一个文件加载内容
- 避免在用ng href加载样式表之前显示内容
- 在不同的域上动态加载样式表;不适用于Firefox
- 如何在javascript调用后重新加载样式
- 重新加载样式表,而不使用 javascript/jQuery 闪烁未设置样式的内容
- 第一次在现场Jquery加载样式
- Sass 加载器不加载样式
- 如何获取加载样式表的内容
- Jquery 循环在第一次加载时未正确加载样式
- 使用回调在 Chrome 中动态加载样式表
- Mapbox react原生can't加载样式
- 如何防止从本地存储加载样式表时呈现css
- 我可以用Aglio重新加载样式、模板和变量吗?
- 动态加载样式表时,cssRules显示为空
- 表达JS部分不加载样式表
- TinyMCE:通过使用链接标签手动加载样式表
- 预加载样式表而不在页面上执行它