Vue.js轮播图走马灯（全）

话不多说先上效果图，本文引荐原博主链接https://blog.csdn.net/qwezxc24680/article/details/77194341 

这个是html,

数据中我用了一个数组来放图片的目录，

data() {
        return {
            superurl: [
                {
                    url: '',
                    img: '../../../../static/image/home/pictureA.png',
                },
                {
                    url: '',
                    img: '../../../../static/image/home/pictureB.png',
                },
                {
                    url: '',
                    img: '../../../../static/image/home/pictureC.png',
                },
                {
                    url: '',
                    img: '../../../../static/image/home/pictureD.png',
                },
                {
                    url: '',
                    img: '../../../../static/image/home/showImg1.png',
                },
                {
                    url: '',
                    img: '../../../../static/image/home/showImg2.png',
                },
            ],
            calleft:0

        }

 方法是这样的

created() {
        this.move()
    },
    methods: {
        //移动
        move() {
            this.timer = setInterval(this.starmove, 2500)
        },
        //开始移动
        starmove() {
            this.calleft -= 340;
            if (this.calleft < -1200) {
                this.calleft = 0
            }
        },
        //鼠标悬停时停止移动
        stopmove() {
            clearInterval(this.timer)
        },
        //点击按钮左移
        zuohua() {
            this.calleft -= 340;
            if (this.calleft < -1200) {
                this.calleft = 0
            }
        },
        //点击按钮右移
        youhua() {
            this.calleft += 340;
            if (this.calleft > 0) {
                this.calleft = -1020
            }
        },
    },

 因为我们只有静态的图片所以这么可以，但是如果是取数据库中不定数量的图片就不能这么使用了 

最后我加上了css样式就可以了

 走马灯效果引用的是elementUI中的样式

 轮播效果图