在Jimdo后台搭建网站时，如果希望首页顶部或某个区块出现横向滚动公告，平台自带的元素面板通常不会直接提供跑马灯组件。不过Jimdo很早就开放了自定义HTML入口，允许站长插入自己编写的HTML片段、样式和部分脚本。这意味着HTML5跑马灯完全可以放进Jimdo页面，而且使用CSS动画实现时，哪怕当前套餐限制JavaScript运行，滚动效果也照常工作。下面把入口位置、无缝循环原理和发布时的设置步骤拆开说明。
Jimdo中自定义HTML的入口与放置位置
登录Jimdo后台后，进入需要编辑的页面，点击左侧或顶部的“添加元素”按钮。不同套餐下的Jimdo编辑器界面会有一些差异，页面元素区通常会提供“自定义HTML”“Widget”或“HTML模块”等入口，找到后直接拖入目标区块即可。如果页面已经使用了分栏布局，建议把自定义HTML拖到一个完整宽度的区域，这样跑马灯不会因为列宽过窄而导致文字被严重裁切。
需要注意两个细节。第一，Jimdo的免费版和较基础套餐对脚本过滤较严，如果代码里包含大量JavaScript，保存后可能被剥离或无法执行。跑马灯只需要HTML结构和CSS动画，不引入脚本，因此兼容性更好。第二，当你在编辑器中粘贴代码时，尽量使用“源码”或“HTML”视图，而不是富文本模式，否则部分引号和符号可能被转换成实体，导致CSS规则失效。粘贴后先保存草稿并预览，确认跑马灯容器没有出现大段空白。
除了单独的页面区块，Jimdo也允许在整站头部或页脚注入代码。如果你希望跑马灯出现在所有页面，可以把HTML代码放到整站设置的“头部代码”或“页脚代码”区域。但这种做法会改变全局结构，适合公告栏或品牌合作墙；如果只是某一个栏目页需要滚动，建议优先使用页面内的自定义HTML元素，避免影响其他页面的加载速度和版式。
HTML5跑马灯代码与无缝循环原理
HTML5标准已经移除了旧的<marquee>标签，虽然部分浏览器仍兼容它，但在Jimdo这类现代建站环境中，使用CSS动画生成跑马灯更稳定，也不会触发安全过滤。核心结构是一个外层容器负责裁剪溢出内容，内层轨道横向排列两份相同内容，并通过关键帧动画把轨道从初始位置向左移动50%。因为第二份内容与第一份完全相同，当动画结束跳回起点时，视觉上不会产生停顿或跳跃。
下面这段代码可以直接粘贴到Jimdo的自定义HTML模块中。为了演示，内容用了两条简短文字，你可以替换成任意文本、图片链接或者内联元素。
<div class="marquee-wrapper">
<div class="marquee-inner">
<span>Jimdo公告：新功能上线，欢迎体验</span>
<span>合作品牌墙正在更新，敬请期待</span>
<span>Jimdo公告：新功能上线，欢迎体验</span>
<span>合作品牌墙正在更新，敬请期待</span>
</div>
</div>
<style>
.marquee-wrapper {
width: 100%;
overflow: hidden;
background: #f7f7f7;
border-radius: 6px;
padding: 8px 0;
}
.marquee-inner {
display: inline-flex;
white-space: nowrap;
will-change: transform;
animation: marquee-move 12s linear infinite;
}
.marquee-inner span {
display: inline-block;
padding: 0 40px;
font-size: 15px;
color: #333;
}
@keyframes marquee-move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
严格来说，这个动画之所以能无缝衔接，是因为内层轨道的内容被复制了一份。CSS中的animation: marquee-move 12s linear infinite表示动画持续12秒、匀速运动、无限循环。当轨道位移到-50%时，第二份内容刚好占据第一份初始位置，浏览器下一帧回到0%不会有任何肉眼可见的跳变。如果把两份内容换成不同文字，循环衔接处会出现明显割裂，因此复制内容时必须保持两边完全一致。
这种写法适合纯横向滚动，也可改成纵向滚动。纵向时把white-space: nowrap去掉，让内部元素纵向排列，再把关键帧中的translateX换成translateY，同时给内层容器设置固定高度。Jimdo页面中若需要图文混排，替换<span>为<img>同样可行，但图片应按行内元素处理，建议设置统一高度，避免轨道高度变化导致布局跳动。
循环设置步骤与Jimdo发布注意事项
跑马灯的速度、方向、暂停行为都可以在CSS里调节，不需要修改HTML结构。默认代码里12秒的时长适合中等长度文字；如果文字较少，可以缩短到6秒；如果希望滚动更柔和，可以调整到18秒以上。使用animation-duration单独覆盖时长即可。想让跑马灯从右往左改为从左往右，在.marquee-inner中添加animation-direction: reverse;，动画会自动反转运动方向，但内容顺序不会改变。
鼠标悬停暂停是公告栏常用的交互，加上下面这段CSS即可实现：
.marquee-inner:hover {
animation-play-state: paused;
}
这个选择器利用:hover伪类把动画状态切换为paused，既不会重置动画位置，也不会影响循环次数。移动端没有悬停状态，如果需要停止滚动，可以额外设置一个触摸事件或减少内容长度。Jimdo的自定义HTML模块通常允许内联样式和外链样式，但不要把所有全局样式都塞进同一个模块，以免影响页面其他区块。
保存代码后，先使用Jimdo的预览功能观察滚动是否正常。遇到文字不滚动的情况，优先检查自定义HTML是否被编辑器转义、样式标签是否被截断；遇到跑马灯容器不显示的情况，检查外层宽度是否被Jimdo布局压缩为0。发布前打开手机预览，确认容器在窄屏下不会把整页撑开，必要时给.marquee-wrapper添加max-width: 100%或overflow-x: hidden。如果希望跑马灯只显示在单个页面，直接在该页面编辑并保存；如果要在全站统一展示，则进入Jimdo的整站设置，把同一段代码粘贴到头部的自定义代码区域，并注意不要重复插入两次。
Jimdo对HTML5和CSS动画的支持比较完整，所以这套方案不需要安装插件，也不受第三方组件库更新影响。后续修改内容时，只需在自定义HTML模块里替换文字或图片，循环逻辑和样式保持不变。通过调整关键帧位移比例、复制内容份数和动画时长，同一个结构还能扩展成双行公告、品牌图标轮播等变体，在Jimdo上实现比固定图片更灵活的展示效果。