无缝跑马灯实现（！marquee）

一般我们需要实现一个简单的跑马灯，我们可以使用标签，但是会存在一个问题，轮播的时候并不是连续的，循环播放的时候中间有段时间会出现白色空白。

image

那么有没有什么办法让循环播放的时候中途不出现空白呢？具体实现代码如下：

    
    
    



  

   

       我是内容，可以是文字，也可以是图片，都行，但是注意此div中的内容加起来需要比滚动区域长
   
   
   

      我是内容，可以是文字，也可以是图片，都行，但是注意此div中的内容加起来需要比滚动区域长
   
  
  
    

注意：滚动区域的内容需要比滚动区域的大小大

以上是普通的html文件的写法，那如果是vue组件如何编写呢？在vue里面实现这个会有一个有关$refs的坑，巨坑！！！，下面我们来写一下在vue里的实现，跳过这个坑。(ref相关的内容请自行查看vue官网)

这个坑是在mouted钩子函数中不能立即去使用this.$refs，所以使用setTimeout()函数停顿一秒后执行，下面是具体的官方介绍，详情请自行查看vue官网。

image.png

image.png