---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/marquee'
title: '添加跑马灯 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:53:07+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 您可以获得一条图片带，在页面上连续循环滚动。适用于合作伙伴徽标、客户展示或品牌巡礼，这些场景下静态行会占用太多空间。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:53:07+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加跑马灯
      description: 您可以获得一条图片带，在页面上连续循环滚动。适用于合作伙伴徽标、客户展示或品牌巡礼，这些场景下静态行会占用太多空间。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:53:07+0000'
      dateModified: '2026-10-24T13:53:07+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/marquee'
      articleSection: 数据与动效
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/marquee'
      description: 您可以获得一条图片带，在页面上连续循环滚动。适用于合作伙伴徽标、客户展示或品牌巡礼，这些场景下静态行会占用太多空间。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[数据与动效](/zh-hans/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # 添加跑马灯.

 学习 DXPR Builder搭建页面添加内容数据与动效

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

您可以获得一条图片带，在页面上连续循环滚动。适用于合作伙伴徽标、客户展示或品牌巡礼，这些场景下静态行会占用太多空间。

## 添加跑马灯

1. 将鼠标悬停在列上，点击其控制栏中的 **+**，或在空页面上点击 **Add Elements**。打开 **Content** 选项卡，点击 **Marquee**。
2. 清除示例 **Images**，然后从媒体库中选择您的徽标并插入。
3. 设置 **Height**，使每个徽标对齐。
4. 选择 **Speed**；徽标宜慢不宜快。
5. 开启 **Gray scale**，获得平静统一的外观。
6. 开启 **Fade edges**，柔化徽标进出的位置。
7. 点击对话框中的 **Save**。然后点击内容区顶部工具栏中的 **Save**，保存页面。

  ## 您会看到的内容

您的徽标在页面上连续循环滚动，高度一致，呈灰色，两端淡入淡出。悬停在图片带上会暂停滚动，方便访问者细看。

## 设置跑马灯

在元素上打开 **More > Settings**。选项：

- **Images：**图片带中的图像。从媒体浏览器中选择或粘贴 URL。
- **Speed：**滚动速度，从 1（最慢）到 5（最快）；默认：3。
- **Height：**图像高度（像素），从 10 到 200（默认：50）。
- **Image layout：**图像的尺寸方式：**Fixed height images** 或 **Fixed width images**。
- **Gray scale：**以灰度显示所有图像。
- **Fade edges：**在左右两端添加淡化效果。

## 如果您没有看到它

- **Content 选项卡中没有 Marquee。**您的用户档案隐藏了它。请让管理员在[User Profiles](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 中启用它。
- **重新加载后它不见了。**页面未保存。请重新添加，点击内容区顶部工具栏中的 **Save**。
- **图片带是空的。**示例图像已清除，且未插入任何图像。请打开 **More > Settings** 并添加图像。
- **徽标大小不一。** **Image layout** 设为了 **Fixed width images**。请选择 **Fixed height images**，然后统一设置一次 **Height**。
- **图片带不动。**页面上有东西悬停其上，或短图片带的 **Speed** 为 1。请移开指针，添加图像或提高速度。

## 接下来做什么？

[样式选项卡](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)，更改跑马灯的间距和背景。