能够实现自上而下和自下而上的流水灯效果，并要求流水灯的速度有快、中和慢三种效果。

要实现自上而下和自下而上的流水灯效果，并提供速度控制，可以使用JavaScript和HTML来构建一个动态的网页动画。这里是一个简单的示例：

首先，在HTML中创建一个包含LED灯的容器：

<div id="leds-container">
  <div class="led" style="width: 50px;"></div>
  <!-- 可以复制更多led元素 -->
</div>

然后在CSS中设置基本样式和动画：

.led {
  height: 5px;
  background-color: red;
  margin-bottom: 5px;
  transition: all 0.3s ease; /* 默认速度 */
}

接下来，在JavaScript中，你可以创建一个函数来控制流水灯效果。我们可以定义三个不同的动画速度：

const speedOptions = { fast: 0.1, medium: 0.3, slow: 0.6 };

function toggleLights(direction, speed) {
  const ledsContainer = document.getElementById('leds-container');
  const leds = ledsContainer.getElementsByClassName('led');

  for (let i = 0; i < leds.length; i++) {
    let led = leds[i];
    if (direction === 'up') {
      led.style.bottom = (i * -5) + 'px'; // 自上而下移动
    } else {
      led.style.top = (leds.length - i - 1) * -5 + 'px'; // 自下而上移动
    }
    
    // 动画速度调整
    setTimeout(() => {
      led.classList.add('animate');
    }, speed * 1000);
  }

  setInterval(function() {
    toggleLights(direction, speed);
  }, 1000 / speed); // 每秒切换一次方向
}

// 开始时向右（自上而下）
toggleLights('up', 'medium');

这个例子会先从上往下移动LED，然后每秒钟切换到向下移动，并且可以根据`speedOptions`中的速度值改变动画速度。