如何在自动播放时为幻灯片创建进度条

fullpage.js - how to create progress bar for slides when autoplay is on

本文关键字：创建 幻灯片 自动播放      更新时间：2023-09-26

我正在使用fullpage.js，并有基本设置ok。我正在使用自动幻灯片功能

afterRender: function() {
  idInterval = setInterval(function() {
    $.fn.fullpage.moveSlideRight();
  }, 2000);

我想在自动幻灯片模式下添加一个计时器进度条，这样用户就知道还有更多。

我有一个代码依赖，并与整个页面的例子和一个工作代码的进度条。https://codepen.io/anon/pen/OXWPje

对于如何在每张幻灯片中加入进度条有什么建议吗?

谢谢

所以我能找到的最好的方法是使用外部ccs动画在幻灯片内部创建一个循环的进度条，与javascript中的计时器设置相匹配。

之类的https://codepen.io/anon/pen/aZpReg

我从https://codepen.io/sriramsitaraman/pen/zBNmgX

中选择了加载代码
.anim9 {
    margin: 0 auto 2em auto;
  width: 600px;
  height: 2px;
  background: -webkit-linear-gradient(left, #f00, #f00 10%, #000 10%);
  background: linear-gradient(to right, #f00, #f00 10%, #000 10%);
  -webkit-animation: anim9 6s linear infinite;
          animation: anim9 6s linear infinite;
}
@-webkit-keyframes anim9 {
  to {
    background-position: 600px 0;
  }
}
@keyframes anim9 {
  to {
    background-position: 600px 0;
  }
}

谢谢

相关文章：