HTML5全屏幻灯片切换特效

HTML5全屏幻灯片切换特效
下载次数:1 文件大小:442.79KB 所需积分:0 QQ联系购买积分:3331653644(1元=10积分)
$(function() {
    var Page = (function() {
        var $navArrows = $( '#nav-arrows' ),
            $nav = $( '#nav-dots > span' ),
            slitslider = $( '#slider' ).slitslider( {
                onBeforeChange : function( slide, pos ) {
                    $nav.removeClass( 'nav-dot-current' );
                    $nav.eq( pos ).addClass( 'nav-dot-current' );
                }
            }),
            init = function() {
                initEvents();
            },
            initEvents = function() {
                // add navigation events 
                $navArrows.children( ':last' ).on( 'click', function() {
                    slitslider.next(); return false;
                }); 
                $navArrows.children( ':first' ).on( 'click', function() {
                    slitslider.previous(); return false;
                });
                $nav.each( function( i ) {
                    $( this ).on( 'click', function( event ) {
                        var $dot = $( this );
                        if( !slitslider.isActive() ) {
                            $nav.removeClass( 'nav-dot-current' );
                            $dot.addClass( 'nav-dot-current' );
                        }
                        slitslider.jump( i + 1 );
                        return false;
                    });
                });
            };
        return { 
            init : init
        };
    })();
    Page.init(); 
});

适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

0 条评论