Question

我已经为3个按钮编写了一些内容，它们根据活动面板添加/删除css类，但它似乎不起作用，因为它在我单击NEXT / PREVIOUS按钮后停止检查。

让我说我有3个面板，当我在面板1上时，我希望它的相应按钮有一个黑色BG，在面板2上有一个红色bg，面板3有一个绿色BG。

    $(slider).anythingSlider(1, function(slider){
    $('a#jiggler').addClass('active');
    $('a#vr').removeClass('active');
    $('a#rlc').removeClass('active');
});
$(slider).anythingSlider(2, function(slider){
    $('a#vr').addClass('active');
    $('a#jiggler').removeClass('active');
    $('a#rlc').removeClass('active');
});
$(slider).anythingSlider(3, function(slider){
    $('a#rlc').addClass('active');
    $('a#vr').removeClass('active');
    $('a#jiggler').removeClass('active');
});

Answer 1

使用AnythingSlider onSlideComplete回调函数更新您的链接。做这样的事情（demo）：

HTML

<nav>
    <a id="grey">1</a>
    <a id="bear">2</a>
    <a id="misc">3</a>
</nav>

<ul id="slider">
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="http://placebear.com/300/200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
</ul>

CSS

nav a {
    padding: 2px 5px;
    cursor: pointer;
    background: red;
}
nav a.active {
    background: black;
    color: white;
}

脚本

var $slider = $('#slider'),
    $nav = $('nav a'),
    updateColors = function($el){
        $el
        .addClass('active')
        .siblings()
        .removeClass('active');
    };

$slider.anythingSlider({
    buildNavigation: false,
    onSlideComplete: function(slider) {
        updateColors( $nav.filter(':contains(' + slider.currentPage + ')') );
    }
});

$nav.click(function(){
    updateColors( $(this) );
    $slider.anythingSlider( $(this).html() );
});

Anythingslider Panel更改另一个对象

1 个答案: