JavaScript——滑动翻页功能（缓慢移动+无缝衔接）

最新推荐文章于 2024-01-04 12:25:58 发布

fighting Ably!

最新推荐文章于 2024-01-04 12:25:58 发布

阅读量3.3k

点赞数

分类专栏： JavaScript 文章标签： js动画滚动翻页效果平滑滚动翻页动画

本文链接：https://blog.csdn.net/weixin_44593720/article/details/119174919

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现数据滚动播放的效果，当内容滚动到末尾时自动重头开始。通过设置定时器、滚动距离判断和CSS样式，实现了平滑的翻页动画。同时，展示了在Vue中应用该翻页效果的代码，提供了一种在实际项目中可自适应调整的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 需求+效果展示

最近做开发时有这样一个需求，滚动播放列表，数据有限，当这些数据滚动播放结束后再重头开始，做完之后的效果是这样的请添加图片描述

2. 实现代码(带标注)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻页功能</title>
</head>

<body>
    <script>
        let intervalTimer;  // 不断执行的定时器
        let intervalDelay = 1000;  //  定时器执行时间
        let scrollSpeed = 10; // 移动速度
        let scrollHeight = 22; // 移动距离，一页/一行的高度
        const rollContent = [
            {
                name: '第一条',
                data: 1,
            },
            {
                name: '第二条',
                data: 2,
            },
            {
                name: '第三条',
                data: 3,
            },
            {
                name: '第四条',
                data: 4,
            },
            {
                name: '第五条',
                data: 5,
            },
            {
                name: '第六条',
                data: 6,
            },
            {
                name: '第七条',