Question

我使用jQuery Cycle2脚本进行带有进度条的幻灯片演示。我正在使用jQuery v1.12.4。

进度条仅在幻灯片转换后开始工作。第一张幻灯片将显示栏中没有进展，但会转换到下一张幻灯片。在此转换之后，进度条开始工作。它始终适用于所有情况：导航到上一个或下一个，暂停悬停，使用缩略图导航等。

在页脚之后加载Cycle2脚本。在此之后加载调用循环函数的脚本文件。

我用于进度条的代码几乎直接来自示例：

        jQuery(document).ready(function($) {

        var slideshow = jQuery('.cycle-slider').cycle();
        var progress = jQuery('#progress');

        slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) {
        progress.stop(true).css( 'width', 0 );
        });

        slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) {
        if ( ! slideshow.is('.cycle-paused') )
            progress.animate({ width: '100%' }, opts.timeout, 'linear' );
        });

        slideshow.on( 'cycle-paused', function( e, opts ) {
         progress.stop(); 
        });

        slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
        progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
        });

        });

示例显示立即开始进度条。

什么可能导致进度条仅在转换后启动？

进度条仅在第一次转换后开始：Jquery Cycle2

0 个答案: