使用vue完成幻灯片操作

最新推荐文章于 2025-04-08 08:00:00 发布

风止

最新推荐文章于 2025-04-08 08:00:00 发布

阅读量3.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_56398485/article/details/127252689

版权

本文介绍如何在不依赖额外组件的情况下，利用Vue.js框架完成幻灯片的制作。文章提供源代码示例，并提醒读者在使用前需先下载Vue文件。

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

今天给大家分享一下如何用vue不使用组件完成幻灯片

为大家直接放上源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				width: 500px;
				height: 350px;
			}

			.active {
				color: red;
			}

			#app>div {
				width: 500px;
				height: 350px;
				position: relative;
			}

			#app>div .mark {
				position: absolute;
				bottom: 10px;
				left: 45%;
			}

			#app>div a:nth-of-type(1) {
				position: absolute;
				top: 45%;
				left: 10px;
			}

			#app>div a:nth-of-type(2) {
				position: absolute;
				top: 45%;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div @mouseover='stopInd' @mouseout='autoplay'>
				<img :src="arrimg[current]" alt="">
				<div class="mark">
					<span :class="current===index?'active':''" v-for='(item,index) in arrimg.length'>{{item}}</span>
				</div>
				<a href="javascript:void(0);" @click='prepic'>&lt;</a>
				<a href="javascript:void(0);" @click='nextpic'>&gt;</a>
			</div>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					arrimg: ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp'],
					current: 0,//当前图片的下标
					ind:null //定时器id
				},
				mounted() {
					this.autoplay();
				},
				methods: {
					//自动播放
					autoplay() {
						// 此处必须是箭头函数，否则this指向window
						this.ind =setInterval(() => {
							this.current++;
							if (this.current >= this.arrimg.length) {
								this.current = 0;
							}
						},3000) 
					},
					//停止播放
					stopInd(){
						clearInterval(this.ind)
					},
					//上一张
					prepic() {
						this.current--;
						if (this.current < 0) {
							this.current =this.arrimg.length-1;
						}
					},
					//下一张
					nextpic() {
						this.current++;
						if (this.current>=this.arrimg.length) {
							this.current =0;
						}
					}
				}
			})
		</script>
	</body>
</html>

下面是效果图