关于小红书的小程序不同数量的轮播图，展示不一样的轮播指示点的实现

用过小红书的人，应该注意到，小红书的详情页轮播模块做的有点花里胡哨，可谓天下产品一家亲。人家有的，我们也想有。于是在百度不到的情况下，只能自己想办法写类似的轮播指示点效果了。

先看想要实现的效果图：

想要坐这样的指示点效果，就要分情况讨论。以下是我个人的思路：

大致可以分为两种情况：

1.图片小于5张的时候只有一种轮播指示点的效果。（就是我们平时最常见的五个轮播点一样大进行轮播）

2.图片大于5张的时候：两种或者三种轮播指示点的效果。

接下来我们就要仔细观察小红书的轮播图和指示点的关系了。于是我找了一共有6张，7张，8张，9张轮播图的详情页，分别对他们进行分析轮播点跟轮播图的关系。

1.第一幅图：看似有五个轮播点，实质只有标1的前三个轮播点会对应前三张轮播图进行切换，标2这部分的指示点只是个静态的装饰。同理第二幅图：只有标1的后三个轮播点会对应后三张轮播图进行切换。那么我们就需要先做两套轮播指示点效果，分别来展示前三张轮播图切换的效果和后三张轮播图切换的效果啦！

2.中间这幅图，只有中间的指示点会高亮，并且表示的是除了前三张图和后三张图以后，中间几张轮播图的指示点，且中间不管有几张，轮播点始终在中间位置不切换。于是我把这个效果的轮播点，做成了一套静态的轮播指示点。

那么我们这个轮播图做起来就有一下几种情况了：

1.当轮播图<=5张的时候：普通的轮播指示点效果。

2.当轮播图==6张的时候:只需要这两套轮播点效果，分别来展示前三张和后三张轮播图

3.当轮播图 >6张的时候:需要三套轮播点效果来对应轮播图。

以下是我的demo代码：

小于5张时候的轮播效果：

大于五张以后的轮播效果：

js部分的：

这只是一部分的代码，我能给大家提供的只是思路和逻辑，还是要靠自己大家去写。如果有想要源码的，请去我的git上去看。由于代码有点多，不方便都复制到这上面。（一个掉到前端坑里出不来的女程序猿，哈哈哈。勿喷！）

代码网址：https://github.com/mr0723/redbook_swiper

记得点星星哦！