使用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，感兴趣的同学可自行查阅（该项目文件组织有点惨不忍睹，还望不要吐槽）