使用vue.js封装一个包含图片的跑马灯组件

初衷：

　　学习完Vuejs后，来准备练习仿写一下老东家的门户页面，主要是为了熟悉一下常用插件的使用，比如video.js，wow.js，swiper等等；而其中涉及到一个包含图片跑马灯组件，大概长这样（从左到右进行轮播　　ps：太懒，没有截动图）：

 历程：

　　像我这样的小白，立马想到的肯定不是自己写了；于是百度查阅，看有没有现成的插件之类，搜索到了vue-marquee-tips，但是查看api，自己试用了一下，发现好像只支持纯文本，无法满足需求；

　　查询插件无果，又想着看一下有没有人已经写好了类似的组件，自己可以直接来用的（搜索和研究api就花费了30多分钟的时间，看来我真的很懒……），查询到一个无缝衔接的文字跑马灯，主要是用定时器对字符串进行切割和重新拼接来实现的，虽然代码实现相对简单，但对我这样的小白来说，个人觉得思路是挺不错的，这里附上链接：https://www.cnblogs.com/zhahuhu/p/11592400.html，但是该组件还是只能用于文字，无法满足需求；

　　终于，我放弃了找现成插件的想法（或许是百度用的不好吧……），准备自己封装一个跑马灯组件；

实现思路：

　　之前学习js的时候，使用定时器做过一个轮播图组件，考虑到跑马灯应该与之类似，只是定时器设置时间较短而已

　　首先使用一个外层div来包裹住展示区域div，外层div设置overflow：hidden，子绝父相进行定位，再定时改变子div的left，考虑到如果不设置条件判断，left会一直改变，所以要在left达到某个值时，将left设置回去，这样就可以实现一直轮播的效果，具体代码如下：

 <template>
   <div class="marquee">
     <div class="marquee-content" @mouseover="clearTimer" @mouseout='startTimer'>
       <div class="img-item" v-for="(item,index) in imglists" :key="index">
         <img :src="item" alt="">
         <span>视频点播</span>
       </div>
     </div>
   </div>
 </template>

 <script>
 export default {
   name: "Marquee",
   components: {
   },
   data() {
     return {
       imglists: [],
       timer: ''
     };
   },
   created() {
     for (var i = 1; i < 18; i++) {
       this.imglists.push('http://www.360tianma.com/application/cms/static/images/component'+i+'.png')
     }
     this.imglists.push('http://www.360tianma.com/application/cms/static/images/component1.png')
     // console.log(this.imglists)
   },
   mounted() {
      this.startTimer();
   },
   methods: {
     clearTimer() {
       clearInterval(this.timer)
     },
     startTimer() {
       var content = document.querySelector('.marquee-content');
       this.timer = setInterval(() => {
       var oldleftstr = getComputedStyle(content,null).left
       var oldleft = parseInt(oldleftstr);
       content.style.left = oldleft-1 + 'px'
       if (oldleft <= -2925) {
         content.style.left = 0
       }
     }, 10);
     }
   }

 };
 </script>

 <style scoped>
   .marquee {
     width: 1140px;
     height: 80px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     margin-top: 100px;
     padding: 15px;
   }
   .marquee-content {
     width: 4050px;
     position: absolute;
     left: 0;
   }

   .img-item {
     width: 225px;
     height: 80px;
     line-height: 80px;
     float: left;
     text-align: center;
   }
   img {
     width: 50px;
     height: 50px;
   }
 </style>

　　注：因为是仿写，主要练习功能实现，所以上述代码中的图片都用for循环来添加成一样的了

个人总结：

　　上述代码虽然简单，而且也存在不少缺陷，但是也为今后解决类似的问题提供一种思路；对于我这样的小白也算是多一次练习和提升；以后遇到类似的组件，可能会多想到自己来封装，而非找其他插件；

该仿写页面已完成，github：https://github.com/Xiaohuimao/Vue-tianma.git，感兴趣的同学可自行查阅（该项目文件组织有点惨不忍睹，还望不要吐槽）