javascript - 如何在我的幻灯片中添加进度条

Question

我为我的 slider 使用 jQuery cycle plugin 2。我想添加进度条。

HTML

<div id="wrapper">
    <div id="prev"></div>
        <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="8000" data-cycle-prev="#prev" data-cycle-next="#next">
            <img src="img/keyboard_pen.jpg">
            <img src="img/laptop_nature.jpg">       
            <img src="img/laptop_notepad_girl.jpg">     
        </div>
    <div id="next"></div>
</div>

这是我的CSS

html, body {margin: 0; padding: 0; width: 100%; height: 100%;}

#wrapper, .cycle-slideshow {
    display: block;
    width: 100%;
    height: 100%;
}
.cycle-slideshow {
    width: 100%;
    overflow: hidden;
    position: absolute;
}
.cycle-slideshow img { width: 100%; height: auto }

#prev { 
    background: url("../img/prev.svg") no-repeat center;
    float: left;
    width: 100px;
}
#next { 
    background: url("../img/next.svg") no-repeat center;
    float: right;
    width: 100px;
}
#prev, #next {
    display: block;
    height: 100%;
    position: relative;
    z-index: 101;
    opacity: 0.5;
    cursor:pointer;
}

这是脚本进度条的链接

http://jquery.malsup.com/cycle2/demo/progress.php

如何在我的 slider 上添加这个？

Answer 1

只需制作一个带有 id #progress 的进度条，然后复制并粘贴链接中提供的脚本 http://jquery.malsup.com/cycle2/demo/progress.php

<script>
var progress = $('#progress'),
slideshow = $( '.cycle-slideshow' );

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' );
});
</script>