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

问题描述

目标:首尾数字实现无缝(无动画)衔接,其它数字有动画。如下代码大佬给看看怎么解决

相关代码

  • {{d}}

        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)
                    }
                        
                }
            },
        })
        

最佳答案

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

思路如下图