javascript - 关于ucloud官网无限滑动的滑块的实现思路，求指点

Question

• 控制台中看大致看到是控制整体列表的margin-left然后移动元素达到无限滑动

• 我按照这么做了，但可能方法不对，先margin-left再用jq的insertBefore位移元素不过有明显的不连贯现象

• 想请问下各位这种滑动正确的思路是怎么样的

Answer 1

完全没有必要使用Jq ，jQ已经逐渐被淘汰的趋势了

这种轮播的效果实现并不复杂

我说说我的思路

1.划定3种class 一种active 就是被放大的 另一种则是普通的 g-box 还有一种就是两边半透明的class hidden
2.给每个盒子加 transition 动画
3.父级使用overflow hidden 内部镶嵌一个ul（也叫transition） ul 宽度很大将所有的li包裹
4.点击一个 盒子 将其 class 添加 上active ul计算 margin-left 的距离（负值） 让其滚动到对应的位置，计算被点击的盒子左右两边缘的盒子半透明，加上hidden
5.如何获取那个盒子被点击呢？ 可以给盒子加上 data-index:x 通过dataset 获取盒子的索引

补充

刚刚看了一下 uCould

思路是不一样的

他实际上并不是滚动，而是重渲

滚动的效果是模拟的，欺骗用户的眼睛

每点击一次，重新渲染所有5个盒子，并根据被点击的盒子，进行一次滚动，滚动完成之后又马上恢复原来的位置