vue 实现轮播图

vue 通过vue-touch 实现轮播图 rem适应 pc端与移动端 可自行修改成px

1. 下载（vue-touch）

npm install vue-touch@next --save

2. main.js中引入：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

3. 上代码

<template>
	<div class="swiper" @mouseenter="stopswiper" @mouseleave="runswiper">
		<v-touch @swipeleft='left' @swiperight='right' >
				<li  v-for="(time,index) in list" :key="index" :class="[swiperIndex == index ? 'image-enter' : 'image-leave-to']">
					<img ondragstart="return false;" :src="time.img" alt="#">
				li>
		v-touch>
		<ul class="allbtn flex_row">
			<li v-for="(time2,index2) in list" :key="index2" :class="{btncolor:swiperIndex=== index2}" @click="changemark(index2)">li>
		ul>
	div>
template>
<script>
	export default {
		data() {
			return {
				swiperIndex: 0, //控制
				timer: null, //自动播放
				jieliu: null, //节流阀
				indexI:0, //图片总数
				list:[
					{
						img:'https://xiwangmao.oss-cn-shanghai.aliyuncs.com/PC/images/PCBG1.png'
					},
					{
						img:'https://xiwangmao.oss-cn-shanghai.aliyuncs.com/PC/images/PCBG2.png'
					},
					{
						img:'https://xiwangmao.oss-cn-shanghai.aliyuncs.com/PC/images/PCBG3.png'
					}
				]
			}
		},
		methods: {
			stopswiper() {
				clearInterval(this.timer)
				this.timer = null
			},
			changemark(index) {
				this.swiperIndex = index
			},
			right() { // 防止用户狂点，加个函数节流
				this.stopswiper()
				if (!this.jieliu) {
					this.jieliu = setTimeout(() => {
						this.swiperIndex--
						if (this.swiperIndex < 0) {
							this.swiperIndex = this.indexI
						}
						this.jieliu = null
						this.runswiper()
					}, 200)
				}
			},
			left() { // 防止用户狂点，加个函数节流
				this.stopswiper()
				if (!this.jieliu) {
					this.jieliu = setTimeout(() => {
						this.swiperIndex++
						if (this.swiperIndex > this.indexI) {
							this.swiperIndex = 0
						}
						this.jieliu = null
						this.runswiper()
					}, 200)
				}
			},
			runswiper() { //自动播放
				this.timer = setInterval(() => {
					this.swiperIndex++
					if (this.swiperIndex > this.indexI) {
						this.swiperIndex = 0
					}
				}, 3000)
			}
		},
		components: {},
		mounted() {
			this.runswiper()
			this.indexI = this.list.length - 1;
		}
	}
script>

<style lang='scss' scoped>
	.swiper {
		position: relative;
		width: 100%;
		height: 2rem;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.allbtn {
			position: absolute;
			bottom: 0.2rem;
			width: 100%;
			li {
				width: 0.1rem;
				height: 0.1rem;
				margin-right: 0.1rem;
				background: #333;
				float: left;
				border-radius: 50%;
				opacity: 0.8;
				cursor: pointer;
			}
			.btncolor {
				background: #fff;
			}
		}
		.image-enter {
			animation: s_enter 0.5s linear forwards;
		}

		.image-leave-to {
			animation: s_leave_to 0.5s linear forwards;
		}

		@keyframes s_enter {
			from {
				opacity: 0;

			}

			to {
				opacity: 1;
			}
		}
		@keyframes s_leave_to {
			from {
				opacity: 1;

			}

			to {
				opacity: 0;
			}
		}
	}
style>

style>

4. 效果图

pc端

移动端