vue实现自动滑动轮播图片

本文实例为大家分享了vue实现自动滑动轮播图片的具体代码，供大家参考，具体内容如下

效果如图：(悬浮时暂停，移出后自动轮播)

①创建图片滑动轮播组件ImageSlider.vue，可设置轮播间隔interval，当页面没被激活（用户没在浏览当前页面）时，自动暂停，重新浏览当前页面（被激活）时，自动轮播

②在要使用滑动轮播图片的页面引入使用组件，并传入图片数组

import ImageSlider from '@/components/ImageSlider'
components: {
    ImageSlider
}
data () {
    return {
      imageData: [
        {
          title: 'image-1,image-1,image-1,image-1,image-1...',
          src: '图片地址'
        },
        {
          title: 'image-2,image-2,image-2,image-2,image-2...',
          src: '图片地址'
        },
        {
          title: 'image-3,image-3,image-3,image-3,image-3...',
          src: '图片地址'
        }
      ]
   }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。