FSVS-jQuery和CSS3带过渡效果的全屏整页垂直滚动特效插件

Simple Full Screen Vertical Slider using CSS3 transitions followed up by a jQuery fallback.
Bound events support mousewheel, click and drag, arrow keys and touch gestures.

jQuery之家返回下载页


$(document).ready( function() {
    // The HTML tag must have a class of fsvs
    var fsvs = $.fn.fsvs({
        speed : 1000
    });
});

Basic HTML setup


<!doctype html>
<html class="fsvs" lang="en">
    <body>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </body>
</html>

Default Options


$(document).ready( function() {
    var fsvs = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
});

Load In New Slides On End


$(document).ready( function() {
    var slider = $.fn.fsvs({
        ...
        endSlide : function(index) {
            $('<div class="slide"><h2>Slide ' + (index+2) + '</h2></div>').appendTo( $('body') );
            // reset the nth classes if you need it
            slider.nthClasses(3);
            // rebind pagination if you need it
            slider.addPagination();
        }
        ...
    });
});