当发生幻灯片自动播放时，将 class 添加到外部导航：anything Slider

Question

我的 anythingSlider 看起来像这样

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">

<div id="externalNav">
Goto <a href="#1">One</a> |
     <a href="#2">Two</a> |
     <a href="#3">Three</a> |
     <a href="#4">Four</a>
</div>

<br><br>

<ul id="slider">
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    <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>
    <li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>

    $('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    autoPlay: true
});

当自动播放发生并且第一张幻灯片处于活动状态时，我想将 class 添加到 <a href="#1">One</a>（下一张幻灯片依此类推），以便我可以将其显示为选中状态。谁能指出实现这一目标的正确方法是什么？ JsFiddle

Answer 1

AnythingSlider Wiki 中有您想要的示例：

Custom, external navigation controls (with updating "cur" class)

var nav = $('#externalNav a'),
    updateNav = function(page){
        nav
            .removeClass('cur')
            .eq(page).addClass('cur');
    }

$('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
        updateNav(slider.currentPage-1);
    },
    // Callback before slide animates
    onSlideBegin: function(e, slider) {
        updateNav(slider.targetPage-1);
    }
});

// set up external links
nav.click(function(){
    var slide = $(this).attr('href').substring(1);
    $('#slider').anythingSlider(slide);
    return false;
});

演示：http://jsfiddle.net/Mottie/ycUB6/76/

当发生幻灯片自动播放时，将 class 添加到外部导航：anything Slider

Add class to external navigation when slide auto-play happens : anythingSlider

javascript

jquery

anythingslider