VUE自制轮播图（仿京粉轮播）

效果图如下所示

这里用到监听滑动组件（vue-touch)
文章地址：https://blog.csdn.net/qq_43764578/article/details/104709333

<template>
	<div id="app" style="background-color: #f7f7f7;">
		<div class="indes">
		<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright">
		  <div v-for="(item,index) in detail" :class="'centerx curr'+curr[index]">
		    <div class="center-imagex">
		    <img :src="item.img" />
		    </div>
		    <div class="center-ney">
		      <div>{{item.name}}</div>
		    </div>
		  </div>
		</v-touch>
		</div>
	</div>
</template>

<script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//弹窗
export default {
  props: {
    msg: String
  },
  data() {
    return {
		detail:[
		  { img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'测试内容1测试内容1测试内容1测试内容1测试内容1'},
		  { img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'测试内容2测试内容2测试内容2测试内容2测试内容2'},
		  { img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'测试内容3测试内容3测试内容3测试内容3测试内容3'}
		],
		curr: [0, 1, 2],
		towards:'',
		interval:''
    }
  },
  mounted(){
	  this.onshow();
  },
  methods: {
	  onshow:function(e){
		  let that = this
		  that.interval = setInterval(function () {
		  if (that.curr[0] == 0){
		    that.curr = [2,0,1]
		  } else if (that.curr[1] == 0){
		    that.curr = [1,2,0]
		  } else if (that.curr[2] == 0){
		    that.curr = [0,1,2]
		  }
		  },3000)
	  },
	  swiperleft: function () {
		// 左划
		let that = this
		clearInterval(that.interval)
		if (that.curr[0] == 0) {
		  that.curr = [2, 0, 1]
		} else if (that.curr[1] == 0) {
		  that.curr = [1, 2, 0]
		} else if (that.curr[2] == 0) {
		  that.curr = [0, 1, 2]
		}
		this.onshow();
	  },
	  swiperright: function () {
	    // 右滑
		let that = this
		clearInterval(that.interval)
		if (that.curr[0] == 0) {
		  that.curr = [1, 2, 0]
		} else if (that.curr[1] == 0) {
		  that.curr = [0, 1, 2]
		} else if (that.curr[2] == 0) {
		  that.curr = [2, 0, 1]
		}
		this.onshow();
	  },
  },
}
</script>
<style>
	.indes{
	  width: 100%;
	  float: left;
	  overflow: hidden;
	  padding: 3%;
	  background-color: #e54d42;
	  position: relative;
	}
	.centerx{
	  float: left;
	  overflow: hidden;
	  background-color: #fff;
	  padding: 3%;
	  border-radius: 0.1rem;
	  transition: all 0.5s;
	}
	.center-imagex{
	  width: 30%;
	  height: 100%;
	  float: left;
	}
	.center-imagex>img{
	  width: 100%;
	  height: 100%;
	}
	.center-ney{
	  width: 70%;
	  height: 100%;
	  float: left;
	  padding: 0 0 0 3%;
	  font-size: 0.24rem;
	}
	.center-ney>div{
	  width: 100%;
	  float: left;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  word-break: break-all;
	}
	
	.curr2{
	  width: 94%;
	  height: 1.6rem;
	  margin: 0.2rem 0;
	  position: absolute;
	  left: 3%;
	  z-index: 1;
	  opacity: 0.8;
	}
	.curr1{
	  width: 91%;
	  height: 1.8rem;
	  margin: 0.1rem 0;
	  position: absolute;
	  left: 3%;
	  z-index: 2;
	  opacity: 0.9;
	}
	.curr0{
	  width: 94%;
	  height: 2rem;
	  position: relative;
	  left: 0;
	  z-index: 3;
	}
</style>

有什么问题欢迎评论留言，我会及时回复你的