请问小红书的banner滚动的指示器效果如何实现的，有没有巨佬提供一下思路。效果可以看一下这个帖子 https://blog.csdn.net/tijjyire/article/details/124668962

请问小红书的banner滚动的指示器效果如何实现的？

AI BotBETA

以下是一个可能的实现方案：

使用 HTML 和 CSS 创建一个指示器，可以使用一个带有边框的矩形来表示每个指示器，并使用 CSS 的动画效果来滚动它们。
使用 JavaScript 来控制指示器的滚动。可以使用定时器函数（如 setInterval）来不断更新指示器的位置，使其看起来像是在滚动。
在每个指示器上添加一个链接，当用户点击链接时，页面会滚动到对应的 banner 上。可以使用锚点链接（Anchor Link）来实现这一点。

下面是一个简单的示例代码：

HTML：

<div class="banner">
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
</div>

CSS：

.banner {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.indicator {
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: #000;
  animation: scroll 15s linear infinite;
}

.indicator:nth-child(1) {
  animation-delay: 0s;
}

.indicator:nth-child(2) {
  animation-delay: 5s;
}

.indicator:nth-child(3) {
  animation-delay: 10s;
}

@keyframes scroll {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

JavaScript：

const indicators = document.querySelectorAll('.indicator');
const banner = document.querySelector('.banner');
const links = document.querySelectorAll('a'); // 获取所有链接元素，可以按需选择适当的元素选择器来获取链接元素。
const indicatorCount = indicators.length; // 指示器数量，可以根据实际情况调整。
const indicatorWidth = indicators[0].offsetWidth; // 指示器宽度，可以根据实际情况调整。
const indicatorSpeed = 20; // 指示器滚动速度，可以根据实际情况调整。单位为毫秒。
const linkOffsetTop = 80; // 链接偏移量，可以根据实际情况调整。单位为像素。
let currentIndex = 0; // 当前索引值，初始化为 0。根据实际需求调整。
let linkIndex = 0; // 链接索引值，初始化为 0。根据实际需求调整。
let timerId = null; // 定时器 ID，用于控制指示器的滚动。初始化为 null。根据实际需求调整。

2 个回答

得票最新