图片轮播组件

最新推荐文章于 2024-05-07 03:39:03 发布

Zaltana

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量188

点赞数 2

分类专栏：框架文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zhoulina815/article/details/123337703

版权

框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.myswiper{
				width:500px;
				height:500px;
				position: absolute;
				margin: auto;
				top:0;
				right:0;
				left:0;
				bottom: 0;
				border:1px solid blue;
			}
			.myswiper img{
				width:300px;
				height:300px;
				position: absolute;
				margin: auto;
				top:0;
				right:0;
				left:0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
		  <lunbo :array="array"></lunbo>	
		</div>
		
		<script type="text/javascript">
			// 全局组件的写法
			var  obj={
				template:`
				 <div class="myswiper">
				     <img :src="array[currentIndex]"/>
				 </div>
				`,
				props:{
					// 父传子过来的图片数组
					array:Array
				},
				data:function(){
					return {
						// 图片数组索引默认值
						currentIndex:0
					}
				},			
				// 当组件加载完后，自动执行图片轮播函数
				// mounted 生命周期函数,当元素和数据渲染完网页之后,会自动执行该函数
				mounted(){
					var that = this;
					console.log(that.array) 
					setInterval(function(){
						console.log(1)
						if(that.currentIndex==that.array.length-1){
							that.currentIndex = 0;
						}
						else{
							that.currentIndex = that.currentIndex +1;
						}						
					},2000)					
											
				}
								
			  }
			
			var app = new Vue({
				el:"#app",
				data:{// 图片的数组变量
					array:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']
				},
				components:{
					"lunbo":obj
				}
			})
			
		</script>		
	</body>
</html>

Zaltana

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片轮播组件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .myswiper{ width:500px; height:.
复制链接

扫一扫