JCarouselLite 平滑垂直滚动
很抱歉,如果以前有人问过这个问题,但我无法找到我正在寻找的确切答案。
我需要制作一个垂直文本滚动条,它可以平滑移动,没有明显的停顿,并且可以无限期地重复。
我找到了 JCarouselLite,一切都按照我想要的方式进行。
但是,如果我将“自动”间隔设置为 1,甚至 0.01,则每个运动之间仍然会有暂停。我还将缓动设置为“线性”,以将其从方程中删除。
接下来,我尝试将滚动设置为更多项目总数和更长的持续时间,以尽量减少停顿。将持续时间设置为 18000 毫秒并设置 51 个项目,看起来很棒。一个问题是,第一次启动之前会延迟 18000 毫秒,随后的每次启动都会延迟。
页面在这里: https://secure.awarenesslife.com/tickertest.cfm
代码 1(单卷轴版本) ):
<script type="text/javascript">
jQuery(document).ready(function() {
$(".academyCarousel").jCarouselLite({
vertical: true,
hoverPause: false,
visible: 15,
easing: 'linear',
auto: 0.001,
speed: 800,
scroll: 1
});
});
</script>
这里的代码2(多滚动版本):
<script type="text/javascript">
jQuery(document).ready(function() {
$(".academyCarousel").jCarouselLite({
vertical: true,
hoverPause: false,
visible: 15,
easing: 'linear',
auto: 0.001,
speed: 18000,
scroll: 51
});
});
</script>
Sorry if this question has been asked before, but I was unable to find the exact answer I was looking for.
I need to make a vertical text ticker that moves smoothly, with no discernable pauses, and repeats indefinitely.
I found JCarouselLite, and got everything looking how I want.
However, if I set the "auto" interval to 1, or even 0.01, there is still a pause inbetween each movement. I've also set the easing to "linear" to remove that from the equation.
Next, I tried setting the scroll to more items total, and a longer duration, to minimize the pauses. With the duration set to 18000ms and 51 items, it looks great. One problem, it delays for 18000ms before getting started the first time, and every subsequent time.
Page here:
https://secure.awarenesslife.com/tickertest.cfm
Code 1 here (single-scroll version):
<script type="text/javascript">
jQuery(document).ready(function() {
$(".academyCarousel").jCarouselLite({
vertical: true,
hoverPause: false,
visible: 15,
easing: 'linear',
auto: 0.001,
speed: 800,
scroll: 1
});
});
</script>
Code 2 here (multi-scroll version):
<script type="text/javascript">
jQuery(document).ready(function() {
$(".academyCarousel").jCarouselLite({
vertical: true,
hoverPause: false,
visible: 15,
easing: 'linear',
auto: 0.001,
speed: 18000,
scroll: 51
});
});
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论