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