Демонстрация JQuery Cycle Plugin. Часть 4

Смена кадров по щелчку кнопкой мыши

(Click on image for next slide)

$('#s1').cycle({
    fx:     'slideY',
    speed:  300,
    next:   '#s1',
    timeout: 0
});

Prev/Next

Prev Next

$('#s2').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    next:   '#next2',
    prev:   '#prev2'
});

Опции timeout и pager

Manual and Auto Advance

(hover to pause, click to advance)

$('#s3').cycle({
    fx:     'fade',
    speed:   300,
    timeout: 3000,
    next:   '#s3',
    pause:   1
});

Pager

$('#s4')
.before('<div id="nav">')
.cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav'
});

Функции перед и после смены кадра

$('#s5').cycle({
    fx:     'scrollLeft',
    timeout: 5000,
    before:  onBefore,
    after:   onAfter
 });

Status area

Функции:

function onBefore() {
    $('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
}

Non-Image Content

The examples thus far have all used image content. This was done for simplicity and because images demo very well. But there is no restriction on slide content. Your slides can contain whatever you wish.

St Andrews State Park - Panama City, FL

This park is one of the most popular outdoor recreation spots in Florida.

Located in the Florida panhandle, the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water.

The ocean provides opportunity for endless fun. From boogie boarding to snorkeling to swimming and boating, there is always something to do.

$('#s6').cycle({
    fx:     'scrollUp',
    timeout: 6000,
    delay:  -2000
});

1 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

2 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

3 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

$('#s7').cycle({
    fx:    'scrollRight',
    delay: -1000
});