轮播图

package-lock.json

@@ -34,7 +34,7 @@
         "@angular-eslint/eslint-plugin-template": "^17.0.0",
         "@angular-eslint/schematics": "^17.0.0",
         "@angular-eslint/template-parser": "^17.0.0",
-        "@angular/cli": "^17.0.0",
+        "@angular/cli": "17.3.8",
         "@angular/compiler-cli": "^17.0.2",
         "@angular/language-service": "^17.0.2",
         "@capacitor/cli": "6.0.0",

package.json

@@ -39,7 +39,7 @@
     "@angular-eslint/eslint-plugin-template": "^17.0.0",
     "@angular-eslint/schematics": "^17.0.0",
     "@angular-eslint/template-parser": "^17.0.0",
-    "@angular/cli": "^17.0.0",
+    "@angular/cli": "17.3.8",
     "@angular/compiler-cli": "^17.0.2",
     "@angular/language-service": "^17.0.2",
     "@capacitor/cli": "6.0.0",

src/app/tab1/tab1.page.html

@@ -6,6 +6,12 @@
 </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>
   <!-- 卡片1 -->
   <ion-card>
     <ion-card-header>

src/app/tab1/tab1.page.scss

@@ -1,4 +1,5 @@
 .home {
+  
   ion-card {
     margin-bottom: 20px;
 
@@ -9,9 +10,9 @@
     ion-button {
       margin-bottom: 10px;
 
-      ion-icon {
-        margin-end: 8px;
-      }
+      // ion-icon {
+      //   margin-end: 8px;
+      // }
     }
   }
 
@@ -19,4 +20,34 @@
     --background: #3880ff;
     --background-activated: #3171e0;
   }
+}
+
+
+.carousel {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+.slide {
+  display: inline-block;
+  opacity: 0;
+  transition: transform 1s, opacity 1s;
+}
+
+.slide.active {
+  opacity: 1;
+}
+
+.slide img {
+  width: 100%;
+  height: 300px; // 轮播图高度
+  object-fit: cover;
+}
+
+.slide img {
+  width: 100%;
+  height: 300px; // 轮播图高度
+  object-fit: cover;
 }

src/app/tab1/tab1.page.ts

@@ -1,11 +1,55 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page {
+// 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; // 循环切换图片
+  }
 
   constructor() {}