jQuery Cycle Plugin动态功能答案

【问题标题】：jQuery Cycle Plugin dynamic functionjQuery Cycle Plugin动态功能
【发布时间】：2012-05-03 20:21:51
【问题描述】：

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

这是有效的原始代码

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

【问题讨论】：

当你调用相同的动态函数时是否循环使用 cycle_id=1 总是？还是里面的一些静态值？你为什么不给html部分呢。
另外，是的，它会一直循环 id cycle_id=1。

标签： jquery jquery-plugins jquery-cycle

【解决方案1】：

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

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

编辑：

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

slideExpr: null, // 选择幻灯片的表达式（如果有的话除了所有孩子都是必需的）

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

【讨论】：