轮播图优化

src/app/tab1/tab1.page.html

@@ -6,12 +6,56 @@
 </ion-header>
 
 <ion-content class="home">
-   <!-- 轮播图部分 -->
-   <ion-card class="carousel">
-    <ion-card class="slide" *ngFor="let image of images; let i = index" [class.active]="i === currentSlide">
-      <img [src]="image" alt="Slide {{i + 1}}">
-    </ion-card>
-  </ion-card>
+  
+  <!-- 轮播图部分 -->
+  <div class="carousel_map">
+    <div class="slide">
+      <!--小圆点-->
+      <input type="radio" name="pic" id="pic1" checked/>
+      <input type="radio" name="pic" id="pic2"/>
+      <input type="radio" name="pic" id="pic3"/>
+      <input type="radio" name="pic" id="pic4"/>
+      
+      <div class="labels">
+        <label for="pic1"></label>
+        <label for="pic2"></label>
+        <label for="pic3"></label>
+        <label for="pic4"></label>
+      </div>
+      
+      <!--需要轮播的图片-->
+      <ul class="list">
+        <li class="item">
+          <a href="###">
+            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
+          </a>
+        </li>
+        <li class="item">
+          <a href="###">
+            <img src="assets/img/slide2.png" style="height: 100%; width: 100%;"/>
+          </a>
+        </li>
+        <li class="item">
+          <a href="###">
+            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
+          </a>
+        </li>
+        <li class="item">
+          <a href="###">
+            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
+          </a>
+        </li>
+        <li class="item">
+          <a href="###">
+            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  
+   
+   
   <!-- 卡片1 -->
   <ion-card>
     <ion-card-header>

src/app/tab1/tab1.page.scss

@@ -23,31 +23,115 @@
 }
 
 
-.carousel {
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
+// 轮播图部分
+* {
+	margin: 0;
+	padding: 0;
+}
+
+.carousel_map {
+	width: 640px;
+	height: 400px;
 }
 
 .slide {
-  display: inline-block;
-  opacity: 0;
-  transition: transform 1s, opacity 1s;
+	width: inherit;
+	height: inherit;
+	overflow: hidden;
+	position: relative;
+}
+
+/* 鼠标放上去显示按钮 */
+.slide:hover .labels {
+	display: flex;
+}
+
+.slide:hover .list {
+	animation: none;
+}
+
+.slide input {
+	display: none;
+}
+
+/* 按钮位置 */
+.labels {
+	position: absolute;
+	bottom: 0.5em;
+	z-index: 1;
+	width: inherit;
+	justify-content: center;
+	display: none;	/* 鼠标移开隐藏按钮 */
 }
 
-.slide.active {
-  opacity: 1;
+/* 按钮样式 */
+.labels label {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	margin: 0 0.3rem;
+	border: 0.1rem solid #fff;
+	background-color: transparent;
+	box-sizing: border-box;
+	cursor: pointer;
 }
 
-.slide img {
-  width: 100%;
-  height: 300px; // 轮播图高度
-  object-fit: cover;
+/* 选择哪个按钮就有被点击的效果 */
+input[id=pic1]:checked ~ .labels label[for=pic1],
+input[id=pic2]:checked ~ .labels label[for=pic2],
+input[id=pic3]:checked ~ .labels label[for=pic3],
+input[id=pic4]:checked ~ .labels label[for=pic4] {
+	background-color: #fff;
+	border: 0.1rem solid #fff;
+}
+/* 按钮控件选择图片 */
+input[id=pic1]:checked ~ .list {
+	transform: translate(calc(0 * 640px));
+}
+input[id=pic2]:checked ~ .list {
+	transform: translate(calc(-1 * 640px));
+}	
+input[id=pic3]:checked ~ .list {
+	transform: translate(calc(-2 * 640px));
+}
+input[id=pic4]:checked ~ .list {
+	transform: translate(calc(-3 * 640px));
+}
+
+ul {
+	list-style: none;
 }
 
-.slide img {
-  width: 100%;
-  height: 300px; // 轮播图高度
-  object-fit: cover;
-}
+.list {
+	width: calc(5 * 640px);
+	height: inherit;
+	position: relative;
+	
+	/* 设置动画效果 */
+	animation: move 15s ease 1s infinite;
+}
+
+/* 动画关键帧轮播 */
+@keyframes move {
+	0% {
+		transform: translate(calc(0 * 640px));
+	}
+	25% {
+		transform: translate(calc(-1 * 640px));
+	}
+	50% {
+		transform: translate(calc(-2 * 640px));
+	}
+	75% {
+		transform: translate(calc(-3 * 640px));
+	}
+	100% {
+		transform: translate(calc(-4 * 640px));
+	}
+}
+
+.item {
+	width: 640px;
+	height: 400px;
+	float: left;
+}

src/app/tab1/tab1.page.ts

@@ -1,55 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-// export class Tab1Page {
-
-//   constructor() {}
-
-//   backupAlbum() {
-//     // 备份相册的逻辑
-//   }
-
-//   backupContacts() {
-//     // 备份通讯录的逻辑
-//   }
-
-//   restoreFiles() {
-//     // 恢复文件的逻辑
-//   }
-
-//   cleanFiles() {
-//     // 清理文件的逻辑
-//   }
-
-//   scanDocuments() {
-//     // 扫描文档的逻辑
-//   }
-
-//   recognizeText() {
-//     // 文字识别的逻辑
-//   }
-
-//   uploadFiles() {
-//     // 上传文件的逻辑
-//   }
-// }
-export class Tab1Page implements OnInit {
-  images: string[] = ['assets/img/slide1.png', 'assets/img/slide1.png', 'assets/img/slide1.png']; // 图片路径数组
-  currentSlide = 0; // 当前轮播图索引
-
-  ngOnInit() {
-    this.showSlide(); // 初始化显示第一张轮播图
-    setInterval(() => this.showSlide(), 3000); // 每5秒切换一次图片
-  }
-
-  // 切换轮播图
-  showSlide() {
-    this.currentSlide = (this.currentSlide + 1) % this.images.length; // 循环切换图片
-  }
+export class Tab1Page {
 
   constructor() {}
 
@@ -81,3 +38,4 @@ export class Tab1Page implements OnInit {
     // 上传文件的逻辑
   }
 }
+