修改home轮播图显示效果

ilmarfreitaso · Jun 30, 2021 · a21fedc · a21fedc
1 parent 9357abc
commit a21fedc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/images/EmptyBanner.png b/images/EmptyBanner.png
diff --git a/pages/home.html b/pages/home.html
@@ -7,29 +7,64 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<link href="../css/mui.min.css" rel="stylesheet" />
 		<!--引入公用样式-->
-		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
+		<link rel="stylesheet" type="text/css" href="../css/public.css" />
 	</head>
 
 	<body>
-		<div class="mui-slider">
-			<div class="mui-slider-group mui-slider-loop slider-height">
+		<div id="slider" class="mui-slider">
+			<div class="mui-slider-group mui-slider-loop">
+				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
+				<div class="mui-slider-item mui-slider-item-duplicate">
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
+				</div>
+				<!-- 第一张 -->
 				<div class="mui-slider-item">
-					<a href="#"><img src="../images/bgimg1.jpg" /></a>
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
 				</div>
+				<!-- 第二张 -->
 				<div class="mui-slider-item">
-					<a href="#"><img src="../images/bgimg2.jpg" /></a>
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
 				</div>
+				<!-- 第三张 -->
 				<div class="mui-slider-item">
-					<a href="#"><img src="../images/bgimg3.jpg" /></a>
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
 				</div>
+				<!-- 第四张 -->
 				<div class="mui-slider-item">
-					<a href="#"><img src="../images/bgimg1.jpg" /></a>
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
+				</div>
+				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
+				<div class="mui-slider-item mui-slider-item-duplicate">
+					<a href="#">
+						<img src="../images/EmptyBanner.png">
+					</a>
 				</div>
 			</div>
+			<div class="mui-slider-indicator">
+				<div class="mui-indicator mui-active"></div>
+				<div class="mui-indicator"></div>
+				<div class="mui-indicator"></div>
+				<div class="mui-indicator"></div>
+			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
 		<script type="text/javascript">
-			mui.init()
+			mui.init();
+			//获得slider插件对象
+			var gallery = mui('.mui-slider');
+			gallery.slider({
+				interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
+			});
 		</script>
 	</body>