JCarouselLite 平滑垂直滚动

发布于 2024-10-26 20:40:41 字数 1168 浏览 0 评论 0原文

很抱歉,如果以前有人问过这个问题,但我无法找到我正在寻找的确切答案。

我需要制作一个垂直文本滚动条,它可以平滑移动,没有明显的停顿,并且可以无限期地重复。

我找到了 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文