master

分支 (1)

管理

管理

master

ngd_vue20240826
/
综合练习-轮播图功能的实现.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind指令讲解</title>
		<script src="js/vue.global.js"></script>
		<style>

		body,html{
			width: 100%;
			height: 100%;
			margin:0px;
		}
		 #app {
		    position: relative;
		    height: 100%;
		  }
		button{
			width: 50px;
			height: 80px;
			background-color: #000000;
			color: #FFFFFF;
			opacity: 0.6;
			position: absolute;
			top:260px;
			border: 0px;
			font-size: 20px;
		}
		.left{
			left: 25%;
			z-index: 2;
		}
		.right{
			left: 65.2%;
		}
		img{
			width: 600px;
			height: 400px;
			position: absolute;
			top: 20%;
			left: 25%;
		}
		</style>
	</head>
	<body>
		<!-- 模拟轮播图的功能，页面上默认显示图片，
		点击图片左侧的标识，可以切换到上一张图片
		点击图片右侧的标识，可以切换到下一张图片
		当图片默认为第一张时，不能够在切换上一张
		当图片为最后一张时，不能够切换到下一张-->
		<div id="app">
			<button v-show="index!=0" @click="leftMethod()" class="left">&lt;</button>
			<img :src="imgsrc[index]"/>
			<button v-show="index!=imgsrc.length-1" @click="rightMethod()" class="right">&gt;</button>
		</div>

	</body>
	<script>
	var app=new Vue({
		// el:用于元素的挂载，绑定页面上声明的元素的选择器
		el:"#app",
		// data指定vue中需要用到的数据对象
		data:{
			index:0,
			imgsrc:["img/bg1.jpg","img/bg2.jpg","img/bg3.jpg","img/bg4.jpg","img/bg5.jpg","img/bg6.jpg","img/bg7.jpg","img/bg8.jpg","img/bg9.jpg","img/bg10.jpg","img/bg11.jpg"]

		},
		methods:{
			leftMethod:function(){
				this.index--
			},
			rightMethod:function(){
				this.index++
			}
		}
	})
	</script>
</html>