动图gif演示手写图片轮播实现方案升级，加上轮播动画 --- vue框架

先看下效果，相较于上个版本，v-show的模式，这次加上了css3的动画效果，运行起来很流畅

test.gif

大致功能的思路是：

点击轮播：给他一个transform:translateX的滚动距离，在配合transition给他个过渡动画，实现点击的时候左右滑动；
自动轮播：这个就比较简单了，直接给他一个animation动画，循环播放，无痕拼接的过程其实就是在整个图片的末尾加了一张图片，轮播到最后一张图片的时候，最后一张又是第一张，之后进行下轮轮播，直接无缝重合，所以肉眼看不出变化。
废话不多说，上代码：

            // 自动播放
            autoSwiper(){
                this.isautomove = true
            },
            // 停止轮播
            stopSwiper(){
                this.isautomove = false
            },
            // 点击事件
            tabClick(val){
                let dom = document.getElementsByClassName("swiper-strip")[0]
                //当前的transformX的值，getComputedStyle是window对象自带方法，可以直接按照属性的取法去取数据
                let transformxVal = parseInt(getComputedStyle(dom).transform.split(",")[4])
                let len = this.urlArr.length
                let movexVal = val === "left" ? transformxVal - 200 : transformxVal + 200
                this.moveStyle = {
                    transition: "all 500ms linear",
                    transform: "translateX("+ movexVal +"px)"
                }
                setTimeout(() => {
                    if ( transformxVal === -200 && val === "right")  {
                        this.moveStyle = {
                            transform: "translateX(-"+(len-2)*200+"px)"
                        }
                    }else if( transformxVal === (len - 2) * (-200) && val === "left" ){
                        this.moveStyle = {
                            transform: "translateX(-200px)"
                        }
                    }
                }, 500);
            }

    //这里是自动轮播的animation动画css3
    .automove{
        animation: gomove 5s infinite linear;
    }
    @keyframes gomove {
        from{
            transform: translateX(-200px);
        }
        to{
            transform: translateX(-1400px);
        }
    }

这里在补充另一个方法改变left的值来改变移动距离，建议用windows自带属性getComputedStyle方法来取值，style.left无法获取外联以及外部样式，大致实现思路是一样的，图片列表的头和末尾都需要插入过渡图片，这样在左右点击的时候才能无缝连接。

            // 点击事件
            tabClick(val){
                let domS = this.$refs.swiperStrip
                let l = parseInt(getComputedStyle(this.$refs.swiperStrip).left.split("px")[0]);
                let movexVal = val === "left" ? -200 : 200
                domS.style.transition = "all 500ms linear"
                domS.style.left = (l + movexVal)+"px"
                setTimeout(() => {
                    let leftV = domS.style.left
                    if (leftV == "0px") {
                        domS.style.left = ( this.urlArr.length - 2 )*-200 + "px"
                        domS.style.transition = ""
                    }
                    if (leftV == (this.urlArr.length - 1)*-200 + "px") {
                        domS.style.left = "-200px"
                        domS.style.transition = ""
                    }
                }, 500);
            }

其实思路很简单，不过对动画不太熟悉的我还是花了好长时间研究，并记录下来，如果需要源代码的朋友，留言或者私聊我，感谢大家支持