循环2寻呼机样式

Question

请告诉我如何使用自定义图像创建寻呼机，以便在幻灯片更改时将当前寻呼机更改为其他图像？

在以下示例中，我希望在激活不同幻灯片时更改循环寻呼机图像。

<div class="cycle-pager">


<img src="images/play.png">
<img src="images/cafe.png">
<img src="images/party.png">
</div><!---end cycle-pager------>



<div  class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-pager=".cycle-pager"
data-cycle-pager-template=""

>
<img src="images/img1.png">
<img src="images/img2.png">
<img src="images/img3.jpg">
</div>

任何帮助表示赞赏！

Answer 1

我解决了我的问题！

如果其他人遇到和我一样的问题，这就是我做的......

我创建了一个.cycle-pager-active类，并给了它在css中最低的不透明度。然后我将cycle-pager的位置设置为绝对值，并为其提供了一个背景图像，其中包含整个寻呼机的完整高度和宽度：

.cycle-pager-active {
   background:white;
   opacity:.10;
filter:Alpha(opacity=10);
}
.cycle-pager {
width:157px;
height:471px;
float:left;
background-image:url(../images/selector.jpg);
position:absolute;

}