图片水平或垂直滚动

在vue项目中引用外部插件VueImgSlider.vue：

import VueImgSlider from '../components/VueImgSlider.vue'

export default {
    name: 'website-about',
    components: {
      'vue-img-slider': VueImgSlider
    },
    data () {
      return {
       demoData:[
          {
            img: '../src/assets/img/wmda.png',
            title: 'wmda'
          },
          {
            img: '../src/assets/img/team.png',
            title: '团队'
          },
          {
            img: '../src/assets/img/tb1.jpg',
            title: 'tb1'
          },
          {
            img: '../src/assets/img/tb2.jpg',
            title: 'tb2'
          }
        ]
      }
    }
  }

使用方法：

<vue-img-slider
      style="width: 400px;height: 400px;"
      :type="'left'"  //跑马灯方向。left:水平方向；top:垂直方向
       margin="'20px'" //每张图片的间隔
       :speed="20"    //图片滑动的速度
      :imgData="demoData" //图片和文字数据
      :txtPos="['40%','10%']" //图片文字位置
    >
 </vue-img-slider>

VueImgSlider.vue 源码：

<template>
  <div class="hello" @mouseover="mouseIn" @mouseout="mouseO">
    <div :style="containerStyle">
      <div :style="ulStyle" ref="box">
        <div v-for="(item , index) in img_data"
             :key="index"
             :style="liStyle">
          <img :src="item.img" alt=""
               class="imgStyle">
          <div :style="txtStyle">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    props: {
      type: {
        type: String,
        default: 'left'
      },
      speed: {
        type: Number,
        default: 20,
      },
      imgData: {
        type: Array
      },
      margin: {
        type: String,
        default: '20px'
      },
      txtPos: {
        type: Array,
        default: ['10%', '10%']
      }

    },
    data () {
      return {
        containerStyle: {
          width: '',
          height: '',
          overflow: 'hidden',
          zIndex: 999,
          position: 'relative'
        },
        ulStyle: {
          position: 'absolute',
          top: '0',
          height: '100%',
          width: '',
        },
        liStyle: {
          float: 'left',
          width: '',
          height: '100%',
          position: 'relative',
          paddingLeft: '20px',
          paddingTop: '2px',
        },
        txtStyle: {
          position: 'absolute',
          bottom: '20px',
          left: '20px',
          zIndex: '10000'
        },
        timer: {},
        img_data: {}
      }
    },
    created(){
      let arr = [];
      this.imgData.forEach(item => {
        arr.push(item)
      });
      this.imgData.forEach(item => {
        arr.push(item)
      });
      this.img_data = arr;
      this.containerStyle.width = '100%';
      this.containerStyle.height = '100%';
      this.ulStyle.height = '100%';
      this.ulStyle.width = '100%';
      this.txtStyle.left = this.txtPos[0];
      this.txtStyle.bottom = this.txtPos[1];

      if (this.type === 'left') {
        this.liStyle.paddingTop = '0'
      } else {
        this.liStyle.width = '100%';
        this.liStyle.height = 'auto';
        this.liStyle.paddingLeft = '0'
      }
    },
    mounted(){
      this.trans(this.type)
    },
    methods: {
      trans(type){
        let _this = this;
        let allImgLength;
        if (type === 'left') {    //判断垂直或水平
          allImgLength = this.img_data.length * this.$el.clientWidth;
          this.ulStyle.width = allImgLength + 'px'
        } else {

          //allImgLength = this.img_data.length * this.$el.clientHeight;
          allImgLength = this.$el.clientHeight;
          this.ulStyle.height = allImgLength + 'px'
        }
        this.timer = setInterval(function () {
          let num = 0;
          try {
            num = Number(_this.$refs.box.style[type].replace('px', ''));
            if (num <= -allImgLength / 2) {
              num = 0
            }
            _this.$refs.box.style[type] = num - 1 + 'px'
          }

          catch (e) {
          }
        }, this.speed)
      },
      mouseIn(){
        clearInterval(this.timer);
      },
      mouseO(){
        this.trans(this.type)
      }
    }
  }
</script>

<style scoped>

  .imgStyle {
    width: 100%;
    height: 100%;
    display: block
  }
</style>