关于幻灯片特效连续播放的问题

Question

问题描述

目标：首尾数字实现无缝（无动画）衔接，其它数字有动画。如下代码大佬给看看怎么解决

相关代码

<div id='app'>

<ul class="ul0">
            <li v-for="d in nums">{{d}}</li>
</ul>

</div>

<script type="text/javascript">

        new Vue({
            el:'#app',
            data:{
                nums:[1,2,3,1],
                index:0,
                zl:''
            },
            mounted(){
                this.zl= setInterval(this.pay,2000)
            },
            methods:{
                pay(){
                    if(this.index==this.nums.length-1){
                        clearInterval(this.zl)
                        this.index=0
                        $('#app ul').removeClass('ul0')  //数字1取消动画 实现前后衔接
                        $('#app ul').css('margin-left',-600*this.index)
                        this.pay()   //没用定时器而是直接调用,欲实现叠加数字无等待时间
                    }else{
                        clearInterval(this.zl)
                        $('#app ul').addClass('ul0')
                        this.index++;
                        $('#app ul').css('margin-left',-600*this.index)
                        this.zl=setInterval(this.pay,2000)
                    }
                        
                }
            },
        })
    </script>    

Answer 1

看了两遍终于明白你的意思了，你想表达是是从最后一张轮播到第一张的是偶无缝对吧

思路如下图