使用vue完成幻灯片操作

今天给大家分享一下如何用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>

下面是效果图

大家使用之前记得要下载vue文件

使用vue完成幻灯片操作

猜你喜欢