Question

类似主题并继续关注以下作者的问题： Cylcle2 no cycle-pager shows up

我遇到了完全相同的问题。可悲的是，前面提到的线程没有提供直接解决问题的方法。

我已经到了这样的地步，我已经直接复制了cycle2 demo的代码，并且在调试问题时完全排除了任何其他代码： 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 span和其他类，因此没有正确显示 - 但那么它如何才能在Cycle2网站上运行？

我在这里完全失去了 - 我很想明白它。期待您的回复 - 提前感谢您！

Answer 1

首先，您需要在幻灯片（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>

Jquery Cycle2 cycle-pager CSS问题

1 个答案: