用html+js实现一个横向滚动走马灯

可以使用以下代码实现横向滚动走马灯效果：

HTML 代码：

<div class="marquee">
  <ul>
    <li>第一条滚动消息</li>
    <li>第二条滚动消息</li>
    <li>第三条滚动消息</li>
    <li>第四条滚动消息</li>
    <li>第五条滚动消息</li>
  </ul>
</div>

CSS 代码：

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee ul {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

.marquee li {
  display: inline-block;
  padding-right: 1em;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

JS 代码：

// 无需 JavaScript 代码

以上代码会创建一个横向滚动的走马灯，其中 `<ul>` 元素包含多个 `<li>` 元素，每个 `<li>` 元素包含一条滚动消息。CSS 中的 `animation` 属性定义了滚动动画，JS 中不需要任何代码。

相关问题

animation 横向走马灯效果

动画中的横向走马灯效果，通常是指一种逐帧展示图片序列，让图片看起来像在水平方向连续移动的效果，给人一种循环滚动的感觉。这种效果常用于网页设计、GUI界面或者简单的动画演示中。实现这一效果，可以采用CSS的`animation`属性或者JavaScript的定时器和DOM操作，通过控制每张图片的显示和隐藏时间，模拟出不断前进的效果。常见的做法是设置动画持续时间和间隔，然后改变图片元素的`left`属性值使其沿x轴移动。

例如，在CSS中，你可以这样做：

.slide {
  position: relative;
  width: 500px; /* 图片宽度 */
  height: 300px; /* 图片高度 */
  overflow: hidden;
}

.slide img {
  display: none;
  animation: slideShow 8s linear infinite; /* 设置动画持续时间，步进函数和无限循环 */
}

@keyframes slideShow {
  0% { left: 0; }
  100% { left: -500px; } /* 总宽度等于图片宽度，达到尽头后回到初始位置 */
}

在这个例子中，图片会在每8秒完成一次从左到右再到左的往返移动。

小程序文字走马灯无缝轮播

小程序文字走马灯可以通过使用 `scroll-view` 组件实现。具体实现步骤如下：

1. 在 `wxml` 文件中添加 `scroll-view` 组件，并设置 `scroll-x` 属性为 `true`，表示横向滚动。

<scroll-view scroll-x="true" class="scroll-view">
  <!-- 文字内容 -->
  <text>这是一条信息</text>
  <text>这是另外一条信息</text>
  <text>这是第三条信息</text>
  <!-- ... -->
</scroll-view>

2. 在 `wxss` 文件中给 `scroll-view` 组件添加样式，使其占据整个屏幕宽度，并隐藏水平滚动条。

.scroll-view {
  width: 100%;
  overflow-x: hidden;
}

3. 在 `js` 文件中监听 `scroll-view` 组件的滚动事件，并设置一个定时器，每隔一定时间让 `scroll-view` 组件向左滚动一个固定宽度的距离（即一条信息的宽度）。

Page({
  data: {
    scrollLeft: 0, // scroll-view 组件的滚动距离
    interval: 2000, // 定时器间隔时间，单位为毫秒
    animationDuration: 500 // 滚动动画执行时间，单位为毫秒
  },

  onLoad: function () {
    // 获取 scroll-view 组件的宽度
    wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {
      this.setData({
        scrollViewWidth: rect.width
      })
    }).exec()

    // 开启定时器
    setInterval(() => {
      // 计算下一次滚动的距离
      const nextScrollLeft = this.data.scrollLeft + this.data.scrollViewWidth
      // 执行滚动动画
      this.setData({
        scrollLeft: nextScrollLeft,
        animationDuration: 500
      })
      setTimeout(() => {
        // 将滚动距离重置为 0，实现循环滚动
        this.setData({
          scrollLeft: 0,
          animationDuration: 0
        })
      }, this.data.animationDuration)
    }, this.data.interval)
  }
})

通过以上步骤，就可以实现小程序文字走马灯的效果了。