Question

我正在尝试更改bootstrap-progress栏，因为它随幻灯片一起转换。

例如

..

slide 1 = 16%
slide 2 = 32%
slide 3 = 48%

依此类推。

到目前为止，我已经能够弄清楚如何进行值更改，但只能使用复选框。请帮帮我。我

此处提供代码： http://www.bootply.com/vRKotQ1Ptc

Answer 1

首先，您必须为轮播设置一个间隔，默认为data-interval="5000"，但最好在需要使用Jquery并获取此值时定义它。

<div class="carousel slide" data-ride="carousel" id="quote-carousel" data-interval="5000">

然后你必须在CSS中取消激活.progress-bar的效果。

.progress-bar {
  background-color:#F0A340!important;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

现在您可以编写功能以填充进度条。我在$(document).ready(function()中编写代码，以便在轮播计时器启动的同时执行它（当页面加载时）。我会使用setInterval来执行相同的代码每个＆＃34; x＆＃34;女士。我写了50 ms和i++;因为我认为视觉效果更好。但您可以根据需要进行修改，例如500 ms和i+=10。您只需计算data-interval的倍数即可定义填充进度条的间隔。

$(document).ready(function(){
  var i = 0;
  setInterval(function() {
    $('.progress-bar').css('width', i + '%').css('value', i);
    i++;
    if(i==100)
      i = 0;
    console.log(i);
}, 50);
});

我希望这有用。

Answer 2

您需要的是valuer变量的值，您将其用作进度条的百分比。当幻灯片更改引导程序的作用时，它会向active添加div类。因此，id div item个id类作为进度的百分比，并通过获取类active的{{1}}属性值来获取它。您必须使用与更改幻灯片相同的间隔来执行此操作。

Answer 3

首先。始终把你的代码放在这里。当然，所提供的链接很不错。

这是你的jquery问题

    $('input').on('click', function(){
  var valeur = 0;
  $('input:checked').each(function(){
       if ( $(this).attr('value') > valeur )
       {
           valeur =  $(this).attr('value');
       }
  });
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
});

您的HTML问题

<div class="progress progress-striped active">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

现在。这可能是您解决问题的方法。用它来创造一个功能。

function newProgress(value){
          $('.progress-bar').css('width', value+'%').attr('aria-valuenow', value);
};

运行幻灯片时，您可以调用该功能。并改变价值。像

    //running slider here
var data = "90"; //<=== Put here your %
    var value$('.progress-bar').attr('value', data);
//now you call the function
newProgress(value );

使用轮播更改bootstrap-progress栏

3 个答案: