Question

我使用Cycle2插件来创建自定义参考列表。仅当单击与锚点的链接时，才应激活切换幻灯片。现在它无论是否有锚都可以工作（尝试点击＆＃34;参考3没有锚和＃34;或者＃34;参考4没有锚和＃34;）。

HTML：

<ul id="references-list" class="cycle-pager external">
    <li><a href="">Ref 1 with image</a></li>
    <li><a href="">Ref 2 with image</a></li>
    <li>Ref 3 without anchor</li>
    <li>Ref 4 without anchor</li>
    <li>Ref 5 should bring 3th slide</li>
</ul>
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#references-list"
    data-cycle-pager-template="">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

的jsfiddle： http://jsfiddle.net/qz1vqkjy/1/

Answer 1

由于您不希望寻呼机中的所有元素做出反应，我建议您从幻灯片中删除寻呼机选项并创建自己的寻呼机代码。

以下使用data-属性来定义要引用的图像（按索引）

HTML

<li><a href="" data-img="0">Ref 1 with image</a></li>

JS for paging

$('#references-list a').click(function(e){
    e.preventDefault();
    $('.cycle-slideshow').cycle( $(this).data('img'));
})

的 DEMO

jQuery -Cycle2插件只能在锚点上更改幻灯片

1 个答案: