Question

这是我的项目的链接，工作正常。如果我单击“下一步”或“上一步”按钮进度条，请不要再回到起始位置，并且在鼠标悬停图像上也不会停止进度条... 我被困在这里...欢迎任何帮助和建议。我在j查询中不太好，我无法弄清楚出了什么问题。我希望有人能为这个小问题找到解决方案。谢谢

$(document).ready(function(){
    var percent = 0, 
    bar = $('.transition-timer-carousel-progress-bar'), 
    crsl = $('#carouselExampleIndicators');
          
    function progressBarCarousel() {
            bar.css({width:percent+'%'});
           percent = percent +0.5;
            if (percent>100) {
                percent=0;
                crsl.carousel('next');
            }      
          }
          crsl.carousel({
              interval: false,
              pause: true
          }).on('slid.bs.carousel', function () {});var barInterval = setInterval(progressBarCarousel, 30);
          crsl.hover,(
              function(){
                  clearInterval(barInterval);
              },
              function(){
                  barInterval = setInterval(progressBarCarousel, 30);
        })
  });

.transition-timer-carousel-progress-bar {
    height: 5px;
    background-color: #fa000c;
    width: 0%;
    margin: 0px 0px 0px 0px;
    border: none;
    z-index: 11;
    position: relative;
}

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Carousel</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
	<body> <section class="slider">
            <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-interval="false" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>


                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img src="https://source.unsplash.com/3IEZsaXmzzs/1500x1200" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                                <h5>First slide label</h5>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </div>
                      </div>
                      <div class="carousel-item">
                        <img src="https://source.unsplash.com/z55CR_d0ayg/1500x1200" class="d-block w-100" alt="...">
                      </div>
                     
                      </div>
                    

                    <hr class="transition-timer-carousel-progress-bar" />
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>



    </section>

谢谢！

具有动画进度条的bootstrap 4图像轮播

0 个答案: