android 走马灯文字 ui走马灯

想要的效果如图

可手动切换轮播。

项目背景，vue项目。

一、自定义指示器样式

.el-carousel__indicator--horizontal .el-carousel__button {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }  
 .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }

说明：以上代码放置在项目 的App.vue中

二、滑动切换效果

展示跑马灯的vue页面中：

<div id="app">
	<template>
		<el-carousel :interval="4000" type="card" arrow="never" ref="carousel">
			<el-carousel-item v-for="item in carouseData" :key="item.id">
				<img class="element-img" alt="" :src="item.url">
			</el-carousel-item>
		</el-carousel>
	</template>
</div>

说明：可以贴上直接使用， 注意ref="carousel" 后面会使用。

data中不需要设置字段。

mounted() {
    this.slideBanner()/*轮播手滑切换*/
  },

 methods中设置三个方法

methods: {
    /*轮播手滑切换*/
    startAuto() {
      if (this.autoplay == false) {
        this.autoplay = true;
      }
    },
    stopAuto() {
      if (this.autoplay == true) {
        this.autoplay = false;
      }
    },
    slideBanner() {
      let that = this
      //选中item的盒子
      var box = document.querySelector('.el-carousel__container');
      //手指起点X坐标
      var startPoint = 0;
      //手指滑动重点X坐标
      var stopPoint = 0;

      //重置坐标
      var resetPoint = function () {
        startPoint = 0;
        stopPoint = 0;
      }

      //手指按下
      box.addEventListener("touchstart", function (e) {
        //手指按下的时候停止自动轮播
        that.stopAuto();
        //手指点击位置的X坐标
        startPoint = e.changedTouches[0].pageX;
      });
      //手指滑动
      box.addEventListener("touchmove", function (e) {
        //手指滑动后终点位置X的坐标
        stopPoint = e.changedTouches[0].pageX;
      });
      //当手指抬起的时候，判断图片滚动离左右的距离
      box.addEventListener("touchend", function (e) {
        console.log("1：" + startPoint);
        console.log("2：" + stopPoint);
        if (stopPoint == 0 || startPoint - stopPoint == 0) {
          resetPoint();
          return;
        }
        if (startPoint - stopPoint > 0) {
          resetPoint();
          that.$refs.carousel.next();
          return;
        }
        if (startPoint - stopPoint < 0) {
          resetPoint();
          that.$refs.carousel.prev();
          return;
        }
      });
    },

 说明：以上方法可以直接粘贴使用，对大神的原文进行了修改，let that = this 。

内容仅为本人开发中记录过程。