vue3手写一个轮播图

vue3手写一个轮播图_第1张图片




 

 在第一张图片和最后一张图片无缝切换的思路就是在原来数据的尾部添加一张第一张图片,然后通过scrollWin.value=0迅速让整个container回到left为0的位置。为了避免此时第二张图大幅度回滚效果,我们先把transition动画取消,也就是通过:class="index==0||index==-1?'noAnimate':'animate'" 来控制。先不让其有动画,回到初始位置以后再进行动画设置

你可能感兴趣的:(javascript,前端,vue.js,轮播图)