jQuery Cycle2滑块 - 数字寻呼机如何更改活动幻灯片的属性

时间:2014-01-03 19:57:06

标签: jquery jquery-cycle2

我为此搜索过高低。这是唯一一个似乎让人们使用这个Cycle2库并提出问题的网站,所以我希望有人可以帮助我完成一项非常简单的任务。我有一个ASP.NET页面使用Cycle2滑块与div而不是图像。我按照他们的例子使用自定义寻呼机。一切正常 - divs过渡和编号的寻呼机上的链接在点击时会加载相关的幻灯片,但是当幻灯片转换时,寻呼机div中的数字链接不会突出显示或改变 - 所以你永远不知道哪个数字是目前的幻灯片。是否可以在激活相关幻灯片时更改数字的颜色?这是我的aspx页面中的一些标记。 asp:PlaceHolder标记中的内容由代码隐藏填充,但这与问题无关,仅作为上下文提供。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle2.js"></script>   

<div class="cycle-slideshow" 
data-cycle-fx="fade"    
data-cycle-timeout="6000"        
data-cycle-slides="> div"
data-cycle-pager="#custom-pager"
data-cycle-pager-template="<a href=#> <u>{{slideNum}}</u> </a>&nbsp;&nbsp;">


<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

</div>     
<div id="custom-pager" style="text-align: right;font-size:12pt"></div>

1 个答案:

答案 0 :(得分:1)

有一个类被分配给活动的寻呼机元素.cycle-pager-active

所以你要做的就是设置那个类的风格,然后你应该去做。

JSFiddle Example