一个循环后停止javascript幻灯片放映

时间:2014-04-12 17:40:04

标签: javascript slideshow

我有一个自定义js幻灯片,其中包含动画设置,true或false,但没有选项可在一个循环后停止动画。到目前为止,我在这里看到类似问题的答案都不合适。有什么建议我怎么能做到这一点?非常感谢您的任何提示。目前的代码如下:

if ( settings.slideshow && slides_number > 1 ) {
            $slider.hover( function() {
                $slider.addClass( 'slider_hovered' );

                if ( typeof slider_timer != 'undefined' ) {
                    clearInterval( slider_timer );
                }
            }, function() {
                $slider.removeClass( 'slider_hovered' );

                slider_auto_rotate();
            } );
        }

        slider_auto_rotate();

        function slider_auto_rotate(){
            if ( settings.slideshow && slides_number > 1 && ! $slider.hasClass( 'slider_hovered' ) ) {
                slider_timer = setTimeout( function() {
                    $slider.slider_move_to( 'next' );
                }, settings.slideshow_speed );
            }
        }


        $slider.slider_move_to = function ( direction ) {
            var $active_slide = $slide.eq( active_slide ),
                $next_slide;

            $slider.animation_running = true;

            if ( direction == 'next' || direction == 'previous' ){

                if ( direction == 'next' )
                    active_slide = ( active_slide + 1 ) < slides_number ? active_slide + 1 : 0;
                else
                    active_slide = ( active_slide - 1 ) >= 0 ? active_slide - 1 : slides_number - 1;

            } else {

                if ( active_slide == direction ) {
                    $slider.animation_running = false;
                    return;
                }

                active_slide = direction;

            }

            if ( typeof slider_timer != 'undefined' )
                clearInterval( slider_timer );

            $next_slide = $slide.eq( active_slide );

1 个答案:

答案 0 :(得分:1)

更改slider_auto_rotate()功能,如下所示:

function slider_auto_rotate(){
    if ( settings.slideshow && slides_number > 1 && ! $slider.hasClass( 'slider_hovered') && ! slider.hasClass( 'slider_final' ) ) {
        slider_timer = setTimeout( function() {
            $slider.slider_move_to( 'next' );
        }, settings.slideshow_speed );
    }
}

然后只需将类slider_final添加到您想要停留的任何幻灯片上,作为注释虽然这将在该点停止滑块而不是在循环之后,如果您想在单个循环后停止& #39;因为你的循环是通过框架(在这种情况下是jQuery)完成的,因此无法添加增量值。这需要你实际上为max slide添加一个设置然后添加一个完整的计数功能。上面的示例可能就像添加第一张幻灯片一样简单,因为这个类的最后一张幻灯片是假的&#39;一个完整的循环并且相当快。