使用vue完成幻灯片操作

最新推荐文章于 2024-04-12 13:40:57 发布

VIP文章风止

最新推荐文章于 2024-04-12 13:40:57 发布

阅读量2.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_56398485/article/details/127252689

版权

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