1. 程式人生 > >Vue-簡單輪播圖

Vue-簡單輪播圖

Vue-簡單輪播圖

vue寫的一個簡單輪播圖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.swiper-item{
				position: absolute;
				
				transition: all 2s;
				opacity: 0;
				
			}
			.swiper-item img{
				width: 100%;
				
				
			}
			.show{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		
		<!-- view -->
		<div id="app">
			
			<div class="swiper">
				
				<div v-for="(item,index) in list" class="swiper-item" :class="{'show':index==currentIndex}">
					<img :src="item.img" alt="">
				</div>
				
			</div>

		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				
				currentIndex:0,
				list:[
					{
						id:1,
						img:"img/1.jpg"
					},{
						id:2,
						img:"img/2.jpg"
					},{
						id:3,
						img:"img/3.jpg"
					},{
						id:4,
						img:"img/4.jpg"
					},
				]
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data,
				methods:{
					dealClick(index){
						this.index = index
					}
				},
				
				created(){
					
					var self = this
					
					setInterval(function () {
						
						
						self.currentIndex++
						
						if(self.currentIndex>=self.list.length){
							self.currentIndex = 0
						}
						
					},4000)
					
				}
			})
			
		</script>
		
	</body>
</html>