第一个轮播括号第二个 "owl-carousel"

Question

我在一个页面中使用了两个进度条 carousel。第一个轮播 breackes 第二个 one.s 进度条。

这是我的第一个轮播：

<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item"><img src="images/fullimage2.jpg" alt="GTA V"></div>
    <div class="item"><img src="images/fullimage3.jpg" alt="Mirror Edge"></div>          
</div>

第二个：

<div id="owl-demo2" class="owl-carousel owl-theme">
    <div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item"><img src="images/fullimage2.jpg" alt="GTA V"></div>
    <div class="item"><img src="images/fullimage3.jpg" alt="Mirror Edge"></div>          
</div>

我已将 id 更改为 owl-demo2。这是我的 css 文件：

#owl-demo .item img{display: block; width: 100%; height: auto;}
#bar{  width: 0%;  max-width: 100%;  height: 4px;  background: #990000;}
#progressBar{  width: 100%;  background: #8A6D3B;}
#owl-demo2 .item img{display: block; width: 100%; height: auto;}

这是js文件

  var time = 7; // time in seconds

  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;

    //Init the carousel
    $("#owl-demo").owlCarousel({
      slideSpeed : 500,
      paginationSpeed : 500,
      singleItem : true,
      afterInit : progressBar,
      afterMove : moved,
      startDragging : pauseOnDragging
    });

    $("#owl-demo2").owlCarousel({
      slideSpeed : 500,
      paginationSpeed : 500,
      singleItem : true,
      afterInit : progressBar,
      afterMove : moved,
      startDragging : pauseOnDragging
    });

    //Init progressBar where elem is $("#owl-demo")
    function progressBar(elem){
      $elem = elem;
      //build progress bar elements
      buildProgressBar();
      //start counting
      start();
    }

    //create div#progressBar and div#bar then prepend to $("#owl-demo")
    function buildProgressBar(){
      $progressBar = $("<div>",{
        id:"progressBar"
      });
      $bar = $("<div>",{
        id:"bar"
      });
      $progressBar.append($bar).prependTo($elem);
    }

    function start() {
      //reset timer
      percentTime = 0;
      isPause = false;
      //run interval every 0.01 second
      tick = setInterval(interval, 10);
    };

    function interval() {
      if(isPause === false){
        percentTime += 1 / time;
        $bar.css({
           width: percentTime+"%"
         });
        //if percentTime is equal or greater than 100
        if(percentTime >= 100){
          //slide to next item 
          $elem.trigger('owl.next')
        }
      }
    }

    //pause while dragging 
    function pauseOnDragging(){
      isPause = true;
    }

    //moved callback
    function moved(){
      //clear interval
      clearTimeout(tick);
      //start again
      start();
    }

我的第一个问题是，我哪里弄错了？第二个问题，进度条可以从上往下放吗？提前谢谢你

Answer 1

Working fiddle

发生这种情况是因为 id 应该是唯一的，并且您为两个进度条提供了相同的 ID。

因此将 ids 更改为 classes，例如：

function buildProgressBar(){
    $progressBar = $("<div>",{
        class:"progressBar"
    });
    $bar = $("<div>",{
       class:"bar"
    });
    $progressBar.append($bar).prependTo($elem);
}

然后在 interval() 函数中使用 class bar 更新所有元素 class :

$('.bar').css({
   width: percentTime+"%"
});

同时将 css 规则从 ids 更改为 classes :

.bar{  width: 0%;  max-width: 100%;  height: 4px;  background: #990000;}
.progressBar{  width: 100%;  background: #8A6D3B;}

最后将 $elem 替换为 :

$elem.trigger('owl.next');

通过 $(".owl-carousel")，因此 owl.next 将应用于两个轮播：

$(".owl-carousel").trigger('owl.next');

希望这对您有所帮助。

片段

$(document).ready(function() {

  var time = 7; // time in seconds

  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;

  //Init the carousel
  $("#owl-demo,#owl-demo2").owlCarousel({
    slideSpeed : 500,
    paginationSpeed : 500,
    singleItem : true,
    afterInit : progressBar,
    afterMove : moved,
    startDragging : pauseOnDragging
  });
  //Init progressBar where elem is $("#owl-demo")
  function progressBar(elem){
    $elem = elem;
    //build progress bar elements
    buildProgressBar();
    //start counting
    start();
  }

  //create div#progressBar and div#bar then prepend to $("#owl-demo")
  function buildProgressBar(){
    $progressBar = $("<div>",{
      class:"progressBar"
    });
    $bar = $("<div>",{
      class:"bar"
    });
    $progressBar.append($bar).prependTo($elem);
  }

  function start() {
    //reset timer
    percentTime = 0;
    isPause = false;
    //run interval every 0.01 second
    tick = setInterval(interval, 10);
  };

  function interval() {
    if(isPause === false){
      percentTime += 1 / time;
      $('.bar').css({
        width: percentTime+"%"
      });
      //if percentTime is equal or greater than 100
      if(percentTime >= 100){
        //slide to next item 
        $elem.trigger('owl.next')
      }
    }
  }

  //pause while dragging 
  function pauseOnDragging(){
    isPause = true;
  }

  //moved callback
  function moved(){
    //clear interval
    clearTimeout(tick);
    //start again
    start();
  }
});

#owl-demo .item img{display: block; width: 100%; height: auto;}
.bar{  width: 0%;  max-width: 100%;  height: 4px;  background: #990000;}
.progressBar{  width: 100%;  background: #8A6D3B;}
#owl-demo2 .item img{display: block; width: 100%; height: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>

<div id="owl-demo" class="owl-carousel">
  <div> ---- Example1 (Your Content 1)</div>
  <div> ---- Example1 (Your Content 2)</div>
  <div> ---- Example1 (Your Content 3)</div>
</div>

<div id="owl-demo2" class="owl-carousel">
  <div> ---- Example2 (Your Content 1)</div>
  <div> ---- Example2 (Your Content 2)</div>
  <div> ---- Example2 (Your Content 3)</div>
</div>

第一个轮播括号第二个 "owl-carousel"

First carousel brackes second one "owl-carousel"

javascript

jquery

owl-carousel

片段