Question

尝试使此功能动态而不是静态。

这是原始代码

$('#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);
});

Answer 1

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

语法为$('#slideshow').cycle('command');，因此您无法选择转到元素。

修改

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

slideExpr：null，//用于选择幻灯片的表达式（如果有的话）除了所有孩子外都需要）

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

jQuery Cycle Plugin动态函数

1 个答案: