文字会自己滚动？快速认识jQuery轮播文字插件dynamo.js：完整入门指南

文字会自己滚动？快速认识jQuery轮播文字插件dynamo.js：完整入门指南

【免费下载链接】dynamo.jsCycles through bits of text in place项目地址: https://gitcode.com/gh_mirrors/dy/dynamo.js

dynamo.js是一个极简的jQuery 轮播文字插件，只需几行 HTML 属性，就能让网页上的任意一段文字自动循环滚动切换。全文源码仅 112 行，轻量、零依赖（仅依赖 jQuery）、MIT 协议免费开源，非常适合新手用来给页面标题、Slogan 或关键词加一点"动起来的魔法"。

💡 什么是 dynamo.js？

dynamo.js 的设计目标只有一个：在原地循环切换一小段文字。

比如你的页面标题是：

I wish I couldchangeone of these words.

加上 dynamo.js 后，加粗的change会自动依次变为alter→edit→mutate→morph，再回到change，如此往复，且高度稳定、不会撑乱排版。

它的工作原理很简单（见 dynamo.js 核心逻辑）：

1. 把元素的原始文字和你在配置里列出的每一段新文字，分别包装成独立子元素，纵向堆叠在容器里；
2. 容器固定为第一行文字的高度，并裁剪溢出部分；
3. 每隔一段延时，把顶部一行向上滑出（slideUp动画），再把滑走的行挪到底部，形成无限循环。

🎯 灵感来源：作者 Jordan Scales 曾做过一个"随机 Slogan"的 Rails 小项目，dynamo.js 就是受其启发（详见 README.md 的 About 章节）。

🚀 三步快速上手 dynamo.js 轮播文字

第 1 步：引入 jQuery 与插件文件

页面中先加载 jQuery，再加载插件源码即可，仓库自带完整开发版和压缩版两个文件：

• 开发版：dynamo.js
• 压缩版：dynamo.min.js

第 2 步：给目标文字加个"轮播标记"

只需在要滚动的文字外包一层<span>，写上dynamo类和data-lines属性（用英文逗号分隔各句内容）：

<p>I wish I could <span class="dynamo">$('.dynamo').dynamo();

完成！打开页面，文字就开始自己滚动了。仓库里有一份现成的演示页 test/test.html，直接打开就能看到滚动标题、点击翻页、甚至"数字时钟"等完整效果。

⚙️ 常用配置项一览表

dynamo.js 支持data 属性和options 选项对象两种配置方式，二者冲突时以 options 对象优先（详见 README.md 的 Options 章节）：

想追求更快的"翻页感"？把data-speed调小、data-delay调大即可，一行属性就能调出你想要的节奏。

✋ 手动触发与暂停：进阶小玩法

暂停自动轮播，改成"点击才翻页"

设置data-pause="true"后，元素只完成初始化，不会自动滚动。配合dynamo_trigger()方法，就能把控制权交给用户：

$('#pause_example').click(function() { $(this).dynamo_trigger(); });

手动触发一次切换

任何时候调用$('#mytarget').dynamo_trigger()，都会立即执行一次滚动动画，适合配合按钮、悬停事件使用。

回调函数：一整轮播完时通知你

通过data-callback或 options 里的callback，可以在每次循环结束时收到通知——test/test.html 里就用这个特性做了一个秒位联动翻页的迷你计时器，非常值得参考。

📂 项目文件导读

整个仓库结构非常小巧，文件不多，新手可以完整读一遍：

✅ 小结：谁适合用 dynamo.js？

• ✅ 想给标题、Banner、Slogan加轮换文案的产品页
• ✅ 希望零学习成本给文字加动效的前端新手
• ✅ 需要极小体积、不引框架的轻量 jQuery 项目

dynamo.js 用不到 200 行代码解决了"文字轮播"这个常见需求：加个 class 写几段文案，文字就会自己滚动起来。把它加进你的页面，试试吧！🚀

【免费下载链接】dynamo.jsCycles through bits of text in place项目地址: https://gitcode.com/gh_mirrors/dy/dynamo.js