vue轮播图

最新推荐文章于 2024-06-15 14:41:39 发布

一只笨菜鸟

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量59

点赞数

分类专栏：有趣的前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_48660016/article/details/121919609

版权

有趣的前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/dist_vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.scoll{
				width: 800px;
				height: 400px;
				position: relative;
			}
			img{
				width: 800px;
				height: 400px;
			}
			.btn{
				position: absolute;
				top: 180px;
				font-size: 22px;
				width: 30px;
				height: 40px;
				background-color: rgb(200,180,200,0.1);
				border: 0;
			}
			.prev{
				left: 0;
			}
			.next{
				right: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="scoll">
				<img :src="imgs[index]" />
				<button type="button" class="btn prev" @click="prev()">&lt;</button>
				<button type="button" class="btn next" @click="next()">&gt;</button>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					index:0,
					imgs: [
						"images/sinablogb7.jpg",
						"images/sinablogb8.jpg",
						"images/sinablogb9.jpg",
						"images/sinablogb10.jpg",
						"images/sinablogb11.jpg"
					]
				},
				mounted: function() {
					setInterval(this.next,3000);
				},
				methods:{
					next:function(){
						if(this.index < this.imgs.length-1){
							this.index++;
						}else{
							this.index=0;
						}
					},
					prev:function(){
						if(this.index>0){
							this.index--;
						}else{
							this.index=this.imgs.length-1;
						}
					}
				}
			})
		</script>
	</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

也可在官网下载到本地

一只笨菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/dist_vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ padding: 0;.
复制链接

扫一扫