jQuery Cycle - 如何根据活动幻灯片更改元素的类答案

【问题标题】：jQuery Cycle - How to change class of element based on active slidejQuery Cycle - 如何根据活动幻灯片更改元素的类
【发布时间】：2012-08-28 11:25:08
【问题描述】：

我有一个使用jQuery Cycle 的杂耍。它的工作方式是单击 .next 或 .prev div 按预期循环播放幻灯片。我需要它做的是让它更新 .timeline_pagination 中的 UL，并将“活动”类添加/删除到相应的幻灯片。例如。如果#tl_2004 幻灯片处于活动状态，则#goto2004 li 需要活动类。我不希望或不需要#goto*** 起作用，它们纯粹是作为显示参考。

提前感谢您的帮助。

这里是标记：

<!-- FAKE PAGINATION -->    
<div class="timeline_pagination">
        <ul>
            <li class="active" id="goto1994">1994</li>
            <li id="goto2000">2000</li>
            <li id="goto2004">2004</li>
            <li id="goto2007">2007</li>
        </ul>
</div>
<!-- END FAKE PAGINATION --> 

<div class="timeline_slideshow">
    <div class="prev"></div>
    <div class="next"></div>
    <div class="tl_slideshow">

        <div id="tl_1994">
            <div class="caption">
                <h4>title</h4>
                <p>my text</p>
            </div>
        </div>

        <div id="tl_2000">
            <div class="caption">
                <h4>title</h4>
                <p>my text</p>
            </div>
        </div>

        <div id="tl_2004">
            <div class="caption">   
                <h4>title</h4>
                <p>my text</p>
            </div>
        </div>

        <div id="tl_2007">
            <div class="caption">
                <h4>title</h4>
                <p>my text</p>
            </div>
        </div>

    </div>
</div>

这里是javascript：

$('.tl_slideshow').cycle({
        fx:         'scrollHorz',
        next:       '.next', 
        prev:       '.prev',
        timeout:    0,
        speed:      750,
        nowrap:     1,
        after:      onAfter
});

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('.prev')[index == 0 ? 'fadeOut' : 'fadeIn']();
    $('.next')[index == opts.slideCount - 1 ? 'fadeOut' : 'fadeIn']();
}

【问题讨论】：

标签： javascript jquery jquery-cycle

【解决方案1】：

试试这个jquery代码

var PREFIX_ID_PAGINATION = "goto";
var PREFIX_ID_SLIDESHOW = "tl_";

$('.tl_slideshow').cycle({
        fx:         'scrollHorz',
        next:       '.next',
        prev:       '.prev',
        timeout:    0,
        speed:      750,
        nowrap:     1,
        after:      onAfter
});

function onAfter(prev, current, opts) {
    var index = opts.currSlide;
    $('.prev')[index == 0 ? 'fadeOut' : 'fadeIn']();
    $('.next')[index == opts.slideCount - 1 ? 'fadeOut' : 'fadeIn']();

    var current_id = $(current).attr('id');
    if( current_id.match("^" + PREFIX_ID_SLIDESHOW + "[0-9]+$")){
        $('li.active').removeClass('active');
        $('#' + PREFIX_ID_PAGINATION + current_id.replace(PREFIX_ID_SLIDESHOW,"")).addClass('active');
    }
}

有一个jsfiddle例子here

【讨论】：