我正在使用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;
}
}
谢谢