‹‹ cycle homejQuery Cycle Plugin - 'goto' Demo

To set the current slide index programatically, call cycle and pass it an int value representing the zero-based index of the slide to be shown.

For demonstration purposes, this page contains a slideshow with three slides and the third slide is set to be displayed initially.

$('#s1').cycle({
    timeout: 0,
    speed:   300,
    startingSlide: 2
});
$('#goto1').click(function() {
    $('#s1').cycle(0);
    return false;
});

$('#goto2').click(function() { 
    $('#s1').cycle(1); 
    return false; 
});

‹‹ cycle homejQuery Cycle Plugin - 'goto' Demo 2 (aka: Poor Man's pager)

The code below shows how I created a "poor-man's" pager control that uses the 'goto' behavior.

var bc = $('#buttonContainer');

var $container = $('#container').cycle({ 
    fx:     'scrollHorz',
    speed:   300,
    timeout: 0
});

$container.children().each(function(i) {
    // create input
    $('<input type="button" value="'+(i+1)+'" />')
        // append it to button container
        .appendTo(bc)
        // bind click handler
        .click(function() {
            // cycle to the corresponding slide
            $container.cycle(i);
            return false;
        });
});

代码整理:代码库 来源:cycle插件官网