Question

我正在使用fullpage.js并且基本设置正常。我正在使用自动滑动功能

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>

RewriteEngine On

# Redirect Trailing Slashes...
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

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

我有一个codepen，有完整的示例和进度条的工作代码。 https://codepen.io/anon/pen/OXWPje

有关如何为每张幻灯片合并进度条的任何建议吗？

感谢

Answer 1

所以我能解决这个问题的最好方法是使用外部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;
  }
}

感谢

fullpage.js - 启用自动播放时如何为幻灯片创建进度条

1 个答案: