类似的主题,并继续以下作者的问题:Cylcle2 没有循环寻呼机显示
我遇到了完全相同的问题。可悲的是,之前提到的线程没有提供该问题的直接解决方案。
我已经到了直接从 cycle2 演示中复制代码并完全排除任何其他代码以尝试调试问题的地步:http://jquery.malsup.com/cycle2/demo/pager.php
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
我还下载并包含了网站上提到的CSS代码。
链接: http://jquery.malsup.com/cycle2/demo/demo-slideshow.css
引用寻呼机的 CSS 代码片段:
/* pager */
.cycle-pager {
text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
现在,对于实际问题:
请注意,我已经从字面上复制了所有代码,包括了正确的javascript脚本并将它们上传到我的服务器。
当我测试时,javascript似乎正在做它的工作,当我将鼠标悬停在图像上时,cycle.pager实际上似乎正在工作。
但是,无论我尝试什么,CSS 代码似乎都不能 100% 运行。我的理论是,由于某种原因,它没有掌握 .cycle-pager 跨度和其他类,因此无法正确显示 - 但是它怎么可能在 Cycle2 网站上工作呢?
我在这里完全不知所措——我渴望理解它。期待您的回复 - 提前感谢您!
首先,您需要在幻灯片(yourPagerBox)上声明寻呼机。此外,您的寻呼机需要在幻灯片之外,因为它不应该被"循环"。下面的 HTML 示例:
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000" data-cycle-pager=".yourPagerBox">
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div class="yourPagerBox"></div>