jquery - 在这些演示中，我如何利用外部导航来创建任何内容滑块来创建上一个下一个外部控件

Question

这是 AnySlider 的两个资源示例

http://jsfiddle.net/Mottie/Cm479/4398/

http://jsfiddle.net/Mottie/Cm479/4401/

我需要简单的上一个/下一个和暂停播放导航，但对于任何滑块来说都是外部的。谁能帮我解决这个问题？

最亲切的问候，

朱奈德

Answer 1

看看这个例子：http: //jsfiddle.net/ycUB6/982/

我认为您可以将onInitialized参数/函数更改为以下内容：

onInitialized: function(e, slider) {
    $("a.next-slide").click(function(){
        slider.goForward();
    });
    $("a.prev-slide").click(function(){
        slider.goBack();
    });
}       

当然，您可以使用下一个/上一个链接上的任何类/ID。

Answer 2

这是一个非常基本的示例（演示），但试试这个 HTML

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

    <a class="play" href="#play">Play</a>
</div>

和这个脚本

var $s = $('#slider');

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

// set up external links
$('#externalNav a').click(function(){
    // get slide number (ignore the #)
    var slide = $(this).attr('href').substring(1),
        // get AnythingSlider data object
        slider = $s.data('AnythingSlider');
    if (slide === "play") {
        // toggle slideshow
        slider.startStop( !slider.playing );
        // change link text
        $('a.play').text( slider.playing ? 'Pause' : 'Play' );
    } else {
        // go to selected slide
        $s.anythingSlider(slide);
    }
    // prevent link from changing the hash
    return false;
});