我如何在我的滑塊添加進度條

Question

我對我的滑塊使用jQuery循環插件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

在我的滑塊如何添加此鏈接？

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>