HTML 自动下翻效果代码示例 - 实现滚动展示 | 代码教程 - 常规

下面是一个简单的 HTML 代码示例，用于创建一个自动下翻的效果：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n.container {\n width: 300px;\n height: 200px;\n overflow: auto;\n}\n.content {\n height: 1000px;\n background-color: lightgray;\n}\n</style>\n</head>\n<body>\n\n<div class="container">\n <div class="content">\n \n </div>\n</div>\n\n<script>\nvar container = document.querySelector('.container');\nvar content = document.querySelector('.content');\n\nfunction autoScroll() {\n container.scrollTop += 1; // 每次下翻的距离\n}\n\nsetInterval(autoScroll, 50); // 每隔50毫秒下翻一次\n</script>\n\n</body>\n</html>\n\n\n在上面的代码中，我们创建了一个容器 div，有固定的宽度和高度，并且设置了 overflow: auto，以便当内容高度超过容器高度时出现滚动条。容器内部有一个 content div，它是我们要展示的内容。\n\n然后，我们使用 JavaScript 创建了一个 autoScroll 函数，每隔一段时间就会将容器的 scrollTop 属性增加一定的距离，从而实现自动下翻的效果。在上面的代码中，我们使用了 setInterval 函数来定时调用 autoScroll 函数，以控制下翻的频率。\n\n你可以将你的内容放置在 content div 中，然后将代码复制到 HTML 文件中运行，就可以看到自动下翻的效果了。你可以根据需要调整 autoScroll 函数中的下翻距离和时间间隔。