轮播图左右滑动

html：

<!--轮播图-->
			<div class="banner" v-if="bannerList.length != 0">
				<ul class="banner_ul" id="bannerUl" :style="{width: (bannerLength + 2) * 7.5 + \'rem\'}" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
					<!-- 最后一个图片 -->
					<li class="banner_li">
						<a :href="\'newsContent.html?id=\'+bannerList[bannerLength - 1].news_id">
							<img :src="bannerList[bannerLength - 1].cover" />
							<p class="banner_word"><span>{{bannerList[bannerLength - 1].name}}</span></p>
						</a>
					</li>
					<!-- 轮播图列表 -->
					<li class="banner_li" v-for="banner in bannerList">
						<a :href="\'newsContent.html?id=\'+banner.news_id">
							<img :src="banner.cover"/>
							<p class="banner_word"><span>{{banner.name}}</span></p>
						</a>
					</li>
					<!-- 第一个图片 -->
					<li class="banner_li">
						<a :href="\'newsContent.html?id=\'+bannerList[0].news_id">
							<img :src="bannerList[0].cover" />
							<p class="banner_word"><span>{{bannerList[0].name}}</span></p>
						</a>
					</li>
				</ul>
				<ol class="banner_ol">
					<li  v-for="(banner,index) in bannerList" :class="bannerIndex == index?\'banner_act_point\':\'\'"></li>
				</ol>
			</div>

　　css：

/*轮播图*/
.banner{
	width: 100%;
	height: 4rem;
	position: relative;
	overflow: hidden;
}
.banner_ul{
	/* width: inherit;
	height: inherit; */
	width: 9999px;
	height: 100%;
	overflow: hidden;
	margin-left: -7.5rem;
}
.banner_ul>li{
	display: inline-block;
	float: left;
	width: 7.5rem;
	height: 100%;
}
.banner_ul>li>a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.banner_ul>li.banner_act_img{
	display: block;
}
.banner_ul>li>a>img{
	width: 100%;
	height: 100%;
}
.banner_word{
	width: 100%;
	height: .6rem;
	line-height: .6rem;
	background: rgba(0,0,0,.5);
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: .28rem;
	color: #fff;
	padding: 0 .29rem;
}
.banner_word>span{
	display: block;
	width: 80%;
	height: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.banner_ol{
	position: absolute;
	right: .3rem;
	bottom: .2rem;
}
.banner_ol>li{
	float: left;
	width: .1rem;
	height: .1rem;
	margin-left: .1rem;
	background: #fff;
	border-radius: 50%;
}
.banner_ol>li:first-child{
	margin-left: 0;	
}
.banner_ol>li.banner_act_point{
	background: #F10000;
}

　　js

//轮播图
		bannerList: [],
		bannerLength: 5, //banner轮播图的长度
		bannerIndex: 0,
		bannerML: -7.5, //banner距离左侧距离
		bannerInter: null, //轮播图定时器
		startPageX: 0, //滑动起始位置
		endPageX: 0, //滑动末位置
		isMoving: false, //是否轮播图正在滑动

// 轮播图轮播
		banner: function() {
			var that = this;
			that.bannerInter = setInterval(that.bannerIF,2000);
		},
		bannerIF: function() {
			var that = this;
			that.bannerIndex++;
			console.log(\'inter:\'+that.bannerIndex);
			that.bannerML = that.bannerML - 7.5;
			$(\'#bannerUl\').animate({
				marginLeft: that.bannerML + \'rem\'
			}, 1000, function() {
				if (that.bannerIndex >= that.bannerLength) {
					that.bannerIndex = 0;
					that.bannerML = -7.5;
					$(\'#bannerUl\').css(\'margin-left\', that.bannerML + \'rem\');
				}
			})

		},

		// 轮播图滑动
		touchStart: function(e) {
			var that = this;
			that.startPageX = e.targetTouches[0].pageX;
			clearInterval(that.bannerInter);
		},
		touchMove: function(e) {
			var that = this;
			that.endPageX = e.targetTouches[0].pageX;

		},
		touchEnd: function() {
			var that = this;
			if (!that.isMoving) {
				that.isMoving = true;
				if (that.endPageX - that.startPageX < 0) {
					// 向左滑动
					that.bannerIndex++;
					console.log(\'touch:\'+that.bannerIndex);
					that.bannerML = that.bannerML - 7.5;
					$(\'#bannerUl\').animate({
						marginLeft: that.bannerML + \'rem\'
					}, 1000, function() {
						if (that.bannerIndex >= that.bannerLength) {
							that.bannerIndex = 0;
							that.bannerML = -7.5;
							$(\'#bannerUl\').css(\'margin-left\', that.bannerML + \'rem\');
						}
						that.isMoving = false;
						setTimeout(function(){
							clearInterval(that.bannerInter);
							that.bannerInter = setInterval(that.bannerIF,2000);
						},2000)
					})
				} else {
					// 向右滑动
					that.bannerIndex--;
					console.log(\'touch:\'+that.bannerIndex);
					that.bannerML = that.bannerML + 7.5;
					$(\'#bannerUl\').animate({
						marginLeft: that.bannerML + \'rem\'
					}, 1000, function() {
						if (that.bannerIndex <= -1) {
							that.bannerIndex = that.bannerLength - 1;
							that.bannerML = -that.bannerLength * 7.5;
							$(\'#bannerUl\').css(\'margin-left\', that.bannerML + \'rem\');
						}
						that.isMoving = false;
						setTimeout(function(){
							clearInterval(that.bannerInter);
							that.bannerInter = setInterval(that.bannerIF,2000);
						},2000)
					})
				}
			}

			// that.bannerInter = setInterval(that.bannerIF,2000);
		},