javascript - 带有classyloader的owl carousel圆形进度条给出了getContext错误

我正在尝试围绕猫头鹰轮播和ClassyLoader（https://andy.su/classyloader/）中的点创建一个圆形进度栏。很好，但是我被这个错误Cannot read property 'getContext' of undefined困住了。

的HTML

<div class="header-slider">
  <div class="header-slider-1">
    some slider content
  </div><!-- .header-slider-1 -->

  <div class="header-slider-2">
   some slider content
  </div><!-- .header-slider-2 -->

</div><!-- .header-slider -->

<div class="owl-dots" id="owldots">
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>

JS

<script type="text/javascript">
  /* ------------------------- Owl settings -------------------------- */
  jQuery(function($){
    $(document).ready(function() {
      var timeout = 5000;
      var owl = $('.header-slider').owlCarousel({
          items: 1,
          dots: true,
          nav: false,
          loop:true,
          autoplay: true,
          autoplayTimeout: timeout,
          dotsContainer: '#owldots',
          onChanged: function () {
              $(function() {
                  var loader = $('.header-slider .owl-dot.active .loader').ClassyLoader({
                      width: 60,
                      height: 60,
                      percentage: 100,
                      speed: 20,
                      animate: true,
                      showRemaining: false,
                      showText: false,
                      diameter: 20,
                      lineColor: 'rgba(245,206,12,1)',
                      lineWidth: 2
                  });
              })
          }
      });
    });
  });
</script>

知道如何使它正常工作吗？

最佳答案

您的代码有几个问题，但最重要的是：必须在您链接的页面的ClassyLoader上实例化canvas：


  接下来，创建要在其上触发插件的canvas元素。


另外，正如我在评论中所述，$(function() { ... });是$(document).ready(function() { ... });的别名。并且由于在您的代码中$是jQuery的别名，因此可以简化它。我个人更喜欢准备文档的语法，这对于将来的读者来说是更加明显的。

注意：您会在the corrected codepen中看到幻灯片的CSS可能会遇到其他麻烦（它们没有显示，可能与猫头鹰轮播样式冲突）。我任意选择将画布设置为fixed，因为它必须是一个单独的元素，这将使其显示在幻灯片上，但是可以进行改进。另请注意，由于您的语法（更改了笔的设置），您需要使用owl版本2，并且我直接复制了ClassyLoader代码，因为它在filebin中不起作用。

更正的代码：

HTML：

<canvas class="header-loader"></canvas>
<div class="header-slider">
  <div class="header-slider-1">
    <p>some slider content 1</p>
  </div><!-- .header-slider-1 -->

  <div class="header-slider-2">
    <p>some slider content 2</p>
  </div><!-- .header-slider-2 -->
</div><!-- .header-slider -->

<div class="owl-dots" id="owldots">
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>

JS：

$(document).ready(function() { //you can also use "$(function() {" instead
  var timeout = 5000;
  var owl = $('.header-slider').owlCarousel({
    items: 1,
    dots: true,
    nav: false,
    loop:true,
    autoplay: true,
    autoplayTimeout: timeout,
    dotsContainer: '#owldots',
    onChanged: function () {
      //don't use "$(function() {" here!
      var loader = $('.header-loader').ClassyLoader({ //changed the class
        width: 60,
        height: 60,
        percentage: 100,
        speed: 20,
        animate: true,
        showRemaining: false,
        showText: false,
        diameter: 20,
        lineColor: 'rgba(245,206,12,1)',
        lineWidth: 2
      });
    }
  });
});

关于javascript - 带有classyloader的owl carousel圆形进度条给出了getContext错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57375746/