如何动态更改 progressbarjs 运行时

Question

请帮我实现一件事。

我在滑块下创建了一个简单的 progressbar.js 行。每张幻灯片都有不同的值（以秒为单位计时），应传递给进度条持续时间。

我使用“.slick-current”获取当前计时值，但值在 var bar 中不会动态变化。我只得到页面加载时收到的第一个值...

  var bar = new ProgressBar.Line("#ProgressBar", {
  strokeWidth: 3,
  easing: 'easeInOut',
  color: '#fff',
  trailColor: '#000',
  trailWidth: 1, 
    duration: n, // should dynamically change
    warnings: false, 
    svgStyle: {width: '100%', height: '100%'}

});

请看例子：jsfiddle

Answer 1

I take current timing value with ".slick-current" but value doesn't dynamically change

var d = $('.slider .slick-current span').text();
var n = d * 1000;

这些是 "simple types" - 字符串和整数。它们不动态绑定到 .slick-current span 的值 - 它们设置一次并保持该值。

您需要在使用之前更新这些值。

$(".slick-next, .slick-prev").click(function() {

  d = $('.slider .slick-current span').text();
  n = d * 1000;

  $(document.body).append('timer: ' + d + 'ms');
  bar.set(0);
  bar.animate(1, {
    duration: n

  }, function() {

    $('.slick-next').click();
    $(document.body).append('timer: ' + d + 'ms');
  });

});

已更新 fiddle：http://jsfiddle.net/oue8sgq6/

如何动态更改 progressbarjs 运行时

How to dynamically change progressbarjs runtime

javascript

jquery

slick.js