主页 / 问题 / 886495
Accepted
stiv
Asked:2020-09-28 11:51:37 +0000 UTC2020-09-28 11:51:37 +0000 UTC

计时器圈到下一张幻灯片光滑滑块

  • 772

我正在尝试以带边框的圆圈的形式实现一个计时器，直到下一张幻灯片。似乎已经想好如何在逻辑上构建它了：制作一个svg圆圈并填充笔划，大致按照以下公式：（周长）/（距离下一张幻灯片的时间）。
我真的需要关于如何完成这项任务的建议。也就是说，他感兴趣的是：用 svg 的什么参数来实现圆圈的间隔填充，以及在哪个滑动滑块事件上应用所有这些动作，可能是在 afterchange 上？

我尝试这样做是试图将进度条导航为一行 https://codepen.io/st-iv/pen/KGKgmv?editors=1010

$(document).ready(function(){
  var time = 2;
  var $bar,
      $slick,
      isPause,
      tick,
      percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {
    if(isPause === false) {
      percentTime += 1 / (time+0.1);
      $bar.css({
        width: percentTime+"%"
      });
      if(percentTime >= 100)
        {
          $slick.slick('slickNext');
          startProgressbar();
        }
    }
  }


  function resetProgressbar() {
    $bar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

  startProgressbar();

});

// circle bar

 //Рассчитываем длину окружности по формуле (с=2πr)
var circleLength = $('.progress-round__wrap circle').attr('r')*Math.PI*2;
// здесь нужно будет сопоставить длину окружности со временем до перелистывания на другой слайд
$('.progress-round__wrap circle').css('stroke-dasharray',       circleLength*part+','+circleLength);
});
$(document).ready(function(){
  var time = 2;
  var $circlebar; 
  $circlebar = $('.progress-round__wrap circle');
  function resetCirclebar() {
    $circlebar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

})

也许尝试与此解决方案结合使用 https://codepen.io/st-iv/pen/jeOMVm?editors=1010

javascript

1 个回答

  1. Best Answer

    如果需要简单地与线同步填充圆圈（如第一个链接中所示），则将interval()函数替换为以下代码就足够了： 

    var $rbar = $('.progress circle');
var rlen = 2 * Math.PI * $rbar.attr('r');
function interval() {
  if (isPause === false) {
    percentTime += 1 / (time + 0.1);
    $bar.css({
      width: percentTime + '%'
    });
    $rbar.css({
      'stroke-dasharray': rlen,
      'stroke-dashoffset': rlen * (1 - percentTime / 100)
    });
  
    if (percentTime >= 100) {
      $slick.slick('slickNext');
      startProgressbar();
    }
  }
}
       /*... и стили немного сократить:*/
   .progress circle {
  fill: #ccc;
  stroke: #00d6d6;
  stroke-width: 10;
}

    UPD

    重写了部分代码。删除了一些东西，添加了一些东西。我希望我的插件具有必要的功能：

    $(document).ready(function() {
  var time = 2;
  var $slick, isPause, tick, percentTime = 0;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true
  });
  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
      startProgressbar();
    },
    mousedown: function() {
      $rbar.fadeOut('slow');
      percentTime = 0;
    },
    afterChange: function(event, slick, currentSlide, nextSlide) {
      $('.circle-tx').text(((currentSlide ? currentSlide : 0) + 1) + '/' + slick.slideCount);
    }
  });

  function startProgressbar() {
    clearTimeout(tick);
    isPause = false;
    tick = setInterval(interval, 20);
    $rbar.fadeIn('slow');
  }
  var $rbar = $('.circle-go');
  var rlen = 2 * Math.PI * $rbar.attr('r');

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $rbar.css({
        strokeDasharray: rlen,
        strokeDashoffset: rlen * (1 - percentTime / 100)
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        percentTime = 0;
        startProgressbar();
      }
    }
  }
  startProgressbar();
});
    .slider-wrapper {
  display: block;
  width: 250px;
  position: relative;
  margin: 0 auto;
}
.slide img {
  width: 250px;
  height: auto;  
}
.progress-round__wrap {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  text-align: center;
}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 10;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(90, 230, 240, 0.75);
  stroke-width: 8;
  stroke-linecap: round;
}
.circle-tx {
  fill: rgba(255, 255, 255, 0.6);
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1;
  font: bold 50px 'Arial';
  text-anchor: middle;
}
    <link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide"><img src="https://isstatic.askoverflow.dev/MraLT.jpg" alt="red wall"></div>
    <div class="slide"><img src="https://isstatic.askoverflow.dev/VxVNC.jpg" alt="yellow flower"></div>
    <div class="slide"><img src="https://isstatic.askoverflow.dev/A9VLC.jpg" alt="green forest"></div>
    <div class="slide"><img src="https://isstatic.askoverflow.dev/oYG0R.jpg" alt="blue rose"></div>
  </div>
  <div class="progress-round__wrap">
    <svg class="progress" viewBox="0 0 110 110">
      <circle class="circle-bg" r="50" cx="55" cy="55"/>
      <circle class="circle-go" r="50" cx="55" cy="55"/>
      <text class="circle-tx" x="50%" y="70"> </text>
    </svg>
  </div>
</div>

    • 7

相关问题