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

Question

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

Answer 1

看 swiper https://www.swiper.com.cn/demo/index.html 分页器 / 动态指示点(040)

测试传送门，swiper 是开源的，直接看源码就行

Answer 2

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

1. 使用 HTML 和 CSS 创建一个指示器，可以使用一个带有边框的矩形来表示每个指示器，并使用 CSS 的动画效果来滚动它们。
2. 使用 JavaScript 来控制指示器的滚动。可以使用定时器函数（如 setInterval）来不断更新指示器的位置，使其看起来像是在滚动。
3. 在每个指示器上添加一个链接，当用户点击链接时，页面会滚动到对应的 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。根据实际需求调整。