2

试图使这个函数动态而不是静态。

这是有效的原始代码

$('#goto1').click(function(e) {
    e.preventDefault();
    $('#slider').cycle(1);
});

这是动态功能（不起作用）。警报输出正确的 id 但滑块不循环。

$('.cycle_goto').live('click', function(e) {
    e.preventDefault();
    var cycle_id = $(this).attr('id').substr(4);
    alert ('##'+cycle_id+'##');
    $('#slider').cycle(cycle_id);
});

HTML如下：

<div id="slider">
    <img class="slide" src="<?=FE_URL;?>images/slide1.jpg" style="position: relative !important;" alt="Slide 1.">
    <img class="slide" src="<?=FE_URL;?>images/slide2.jpg" alt="Slide 2">
    <img class="slide" src="<?=FE_URL;?>images/slide3.jpg" alt="Slide 3">
</div>
<div class="slider_nav">
    <ul id="slider_nav_ul">
        <li><a class="cycle_goto" id="goto1" href="#">Hotel &amp; Residence<span class="arrow"><!--  --></span></a></li>
        <li><a class="cycle_goto" id="goto2" href="#">Yacht Charter<span class="arrow"><!--  --></span></a></li>
        <li><a class="cycle_goto" id="goto3" href="#">Properties<span class="arrow"><!--  --></span></a></li>
    </ul>
</div>

编辑

通过使用以下代码将元素 id 转换为整数来使其工作：

$('.cycle_goto').live('click', function(e) {
    e.preventDefault();
    var myString = $(this).attr('id').substr(4);
    var myInteger;
    myInteger = parseInt(myString);
    var cycle_id = myInteger;
    $('#slider').cycle(cycle_id);
});
4

1 回答 1

2

您使用$('#slider').cycle(1);的逻辑上是无效的。

语法是$('#slideshow').cycle('command'); ，因此您不能选择转到某个元素。

编辑：

您可以通过更改 API 中的选项来选择转到一个元素或选择一组元素：

slideExpr: null, // 选择幻灯片的表达式（如果需要除所有子项之外的其他内容）

例如：$('#slider').cycle({ slideExpr: $('#slider .child') });

于 2012-05-03T12:02:45.820 回答