vue-轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		#app{
			width: 570px;
			height: 280px;
			position: absolute;
			top:50%;
			left:50%;
			margin-top: -140px;
			margin-left: -285px;
			border:1px solid black;
			background-color:green;
			overflow: hidden;
		}
		.bottom{
			height: 13px;
			border-radius: 6.5px;
			position: absolute;
			bottom:10px;
			background-color: rgba(255,255,255,0.3);
			left:50%;
			transform: translateX(-50%);
			padding: 0;
			list-style: none;
		}
		.bottom .img{
			width: 8px;
			height: 8px;
			margin:2.5px 3px;
			float: left;
			border-radius: 4px;
			background-color: white;
			cursor: pointer;
		}
		.bottom .active{
			background-color: orange;
		}
		.pic{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top:0;
			background-size:100%;
			background-repeat: no-repeat;
		}
		/*左边进来，右边出去*/
		.guo-enter{
			transition: 0.1s;
			transform: translateX(-520px);
		}
		.guo-enter-active,.guo-leave-active{
			transition: 0.1s
			transform:translateX(0px);
		}
		.guo-leave-to{
			transition: 0.1s;
			transform: translateX(520px);
		}
		/*右边进来，左边出去*/
		.guo-enter{
			transition: 0.1s;
			transform: translateX(520px);
		}
		.guo-enter-active,.guo-leave-active{
			transition: 0.1s
			transform:translateX(0px);
		}
		.guo-leave-to{
			transition: 0.1s;
			transform: translateX(-520px);
		}
	</style>
	<script src='node_modules/vue/dist/vue.min.js'></script>
</head>
<body>
	<div id='app'>
		<transition name='guo' v-for='(v,i) in img'>
			<div :style='{backgroundImage:"url(" + v + ")"}' class='pic' v-show='i===index?true:false'></div>
		</transition>
		<ul class='bottom' :style='{width:img.length*14+"px"}'>
			<li class='img' v-for='(v,i) in img' :class='i===index?"active":""' @click='change(i)'></li>
		</ul>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				img:['1.png','2.png','3.png'],
				index:0
			},
			methods:{
				change(i){
					this.index = i;
				}
			}
		});
	</script>
</body>
</html>
猜你喜欢
