jQuery水平滑块循环到第一个项目

时间:2014-05-09 15:30:33

标签: jquery html css slider reverse

我正在开发一个jQuery水平滑块,我想知道当我在最后一个项目时它是否可能而不是具有这个反向效果它循环到第一个项目? 你知道我应该在我的jQuery脚本中修改什么吗?

HERE MY FIDDLE

$(function () {
    var 
        animation = function ( href ) {
            var 
                name = "active",
                element = $( "a[href='" + href + "']" );

            $( "html, body" ).stop().animate( {
                scrollLeft: $( href ).offset().left
            }, 1200 );

            element.closest( "ul" ).find( "li" ).removeClass( name );
            element.parent().addClass( name );
        },
        menu = $( "#list" );

    animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );

    $( "#cssmenu a" ).bind( "click", function( event ) {
        var target = $( this ).attr("href");

        animation( target );

        event.preventDefault();
    } );

    $( "#next, #prev" ).click( function ( event ) {
        var
            positionActiveClass = menu.find( "> li.active" ).index(),
            menuLength = menu.find( "> li" ).length - 1,
            buttonId = $( this ).attr( "id" );

        if ( buttonId === "next" ) {
            if ( positionActiveClass === ( menuLength ) ) {
                newElementActiveClass = menu.find( "li" ).eq( 0 );
                newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                animation( newPositionActiveClass );
            } else {
                newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
                newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                animation( newPositionActiveClass );
            }
        } else {
            if ( positionActiveClass === 0 ) {
                newElementActiveClass = menu.find( "li" ).eq( menuLength );
                newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                animation( newPositionActiveClass );
            } else {
                newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
                newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                animation( newPositionActiveClass );
            }
        }

        event.preventDefault();
    } );

} );

0 个答案:

没有答案