如何实现一个无缝无限轮播时间轴...

废话不多说，先贴效果图

看图片可以把这个分割成两部分
1.时间轴
2.图片展示
<ol>首先来分析一下时间轴
可视范围这样

实际长度

操作
给实际长度添加动画效果
css部分
:
transform: translateX(calc(var(--translateX) * 1px));//1px是因为要用postcss转rem
transition: transform 0.6s ease-out;
js部分
const translateX = ref(0);
这就是主要实际长度的主要代码，是不是很简单translateX 的值根据自己需求偏移量计算接下来分析时间点：
分析一波：点主要是间隔分布，用间隔倍数来绝对定位确定每个点的位置
const dots = ref([])点的数组
const dotSpacing = 251.5;点间距

css部分
:
left: calc(var(--x) * 1px);
确定好样式了接下来就来实现点击轮播了
先实现位置的重新计算direction 是传的值，1，-1表示左右
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！