使用Vue3实现轮播图

使用轮播组件实现图片轮播效果

冒泡的可乐.

6562人浏览 · 2023-05-10 21:26:46

冒泡的可乐. · 2023-05-10 21:26:46 发布

实现功能

鼠标移至图片，停止轮播图播放
鼠标移至图片外，播放轮播图
鼠标点击轮播图下方数字，切换到对应图片

实现思路

在data属性中定义了一些数据，包括轮播图片信息，当前图片索引、定时器、标志位，在“created”生命周期钩子函数中，调用“play()”方法来启动轮播图自动播放
在method中定义三个方法：‘change’、‘play’、‘stop’、‘go’
change

用于切换图片，它接受一个参数‘index’表示要切换到图片的索引，然后将当前显示图片的索引‘currentIndex’设置为‘index’

play

用于开始播放轮播图片，先使用‘setInterval()’函数创建一个定时器，每隔3s调用一次匿名函数，在匿名函数中，判断是否停止播放，如果没有，则当前显示的图片的索引‘currentIndex’加1，如果当前索引大于slideList的长度，则当前索引回到初始0，这样就实现了自动播放

stop

用于停止播放轮播图，调用clearInterval()来清除定时

用于轮播图播放，调用上方设置好的play()方法

HTML代码中，使用Vue中的过渡组件‘transition-group’来实现图片的淡入淡出的效果
配合css来设置过渡效果

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用Vue3实现轮播图效果</title>
		<link rel="stylesheet" href="./css/test.css">
	</head>
	<body>
		<div id="box">
			<div class="banner">
		  		<!--切换图片-->
		  		<div class="bannerImg">
		    		<transition-group name="fade" tag="ul" class="slideUl">
						<li v-for="(list, index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
							<a :herf="list.clickURL">
								<img :src="list.image" :alt="list.desc">
							</a>
						</li>
		    		</transition-group>
		  		</div>
		  		<!--切换小按钮-->
		  		<div class="bannerItems">
		  		    <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)">{{index+1}}</span>
		  		</div>
			</div>
		</div>
		<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
		<script src="./js/test.js"></script>
	</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
a{
	text-decoration: none;
}
.banner {
	width: 1080px;
	height: 720px;
	margin: 20px auto;
	position: relative;
}
.bannerImg img{
	width: 1080px;
	height: 720px;
	position: absolute;
	z-index: 800;
}
.bannerItems{
	position: absolute;
	z-index: 1000;
	bottom: 0;
	width: 100%;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.bannerItems span{
	width: 30px;
	height: 30px;
	background:  rgba(100, 100, 100, .6);
	margin: 0 5px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: bold;
	font-family: Microsoft YaHei;
	line-height: 30px;
	text-align: center;
	color: white;
	cursor: pointer;
}
.bannerItems span.active{
	background-color: red;
}

JS

const App = {
	data(){
		return {
			slideList:[
				{
					image:"https://picsum.photos/800/300?random=1",
					desc:"第一张照片",
					clickURL:"https://picsum.photos/800/300?random=1"
				},
				{
					image:"https://picsum.photos/800/300?random=2",
					desc:"第二张照片",
					clickURL:"https://picsum.photos/800/300?random=2"
				},
				{
					image:"https://picsum.photos/800/300?random=3",
					desc:"第三张照片",
					clickURL:"https://picsum.photos/800/300?random=3"
				},
				{
					image:"https://picsum.photos/800/300?random=4",
					desc:"第四张照片",
					clickURL:"https://picsum.photos/800/300?random=4"
				},
				{
					image:"https://picsum.photos/800/300?random=5",
					desc:"第五张照片",
					clickURL:"https://picsum.photos/800/300?random=5"
				},
				{
					image:"https://picsum.photos/800/300?random=6",
					desc:"第六张照片",
					clickURL:"https://picsum.photos/800/300?random=6"
				}
			],
			currentIndex: 0, // 当前显示的图片的索引
			timer: null // 自动切换的定时器
		}
	},
	methods: {
		play() {
			this.timer = setInterval(() => {
			this.currentIndex++;
			if (this.currentIndex >= this.slideList.length) {
			this.currentIndex = 0;
			}
			}, 3000);
			},
		stop(){
			clearInterval(this.timer);
		},
		go(){
			this.play();
		},
		change(index){
			this.currentIndex = index;
		},
		mounted() {
			// 页面加载完成后，开始自动播放
			this.go()
		  }
	},
};
Vue.createApp(App).mount('#box');

运行效果图

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^