vue 实现轮播图_vue 轮播图css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44114415/article/details/115981585

本文展示了如何使用 Vue.js 和 vue-touch 库创建一个响应式的轮播图组件，该组件适用于 PC 和移动端。代码示例中包含了事件监听、自动播放、手动滑动切换以及节流处理等功能，同时使用了 rem 单位实现尺寸适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

下载（vue-touch）

npm install vue-touch@next --save

main.js中引入：

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

上代码

<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>

效果图

pc端

移动端