我正在尝试在 Angular 中创建一个简单的轮播，但交互部分不起作用，我没有弄清楚问题所在，有人可以帮助我吗？ 单击按钮时，它们不会更改不同的图片..
我尝试使用 ChatGpt 但它没有多大帮助.. 我期待着交互部分能够正常工作...
这是代码： 幻灯片.component.html :
<body>
<div id="carousel-container">
<div *ngIf=" images && images.length > 0" class="carousel-container">
<div *ngFor="let image of images; let i = index">
<img [src]="image.imagesrc" [alt]="image.imagealt"
[ngClass]="{'image-active': selectedIndex === i}"
(click)="selectImage(i)" class="fade">
</div>
<div *ngIf="indicators" class="carousel-dot-container">
<span class="dot" *ngFor="let dot of images; let i = index"
[ngClass]="{'dot-active': selectedIndex === i}"
(click)="selectImage(i)">
</span>
</div>
<a class="prev" (click)="previousSlide()">❮</a>
<a class="next" (click)="nextSlide()">❯</a>
</div>
</div>
</body>
</html> ,
幻灯片.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
interface SlideContent{
imagesrc: string;
imagealt: string;
}
@Component({
selector: 'app-slideshow',
standalone: true,
imports: [CommonModule],
templateUrl: './slideshow.component.html',
styleUrl: './slideshow.component.css'
})
export class SlideshowComponent implements OnInit {
@Input() images: SlideContent[] = [];
@Input() indicators = true;
selectedIndex = 0;
intervalId:any;
ngOnInit(): void {
console.log('Slideshow initialized with images:', this.images);
}
//sets index of image on dot/indicator click
selectImage(index: number): void{
this.selectedIndex= index;
}
startAutoSlide() {
this.intervalId = setInterval(() => {
this.nextSlide();
}, 3000); // Change slide every 3 seconds
}
nextSlide() {
this.selectedIndex = (this.selectedIndex + 1) % this.images.length;
}
previousSlide() {
this.selectedIndex = (this.selectedIndex - 1 + this.images.length) % this.images.length;
}
}
应用程序.组件.ts
images =[
{
imagesrc:'example',
imagealt:"example",
},
{
imagesrc: 'example',
imagealt:"example",
},
{
imagesrc:'example',
imagealt:"example",
},
}
然后在App.component.html中：
<app-slideshow [images]="images" [indicators]="true"></app-slideshow>缺少
ngOnInit我为自动播放添加了一个输入参数来启用它！
ngOnInit(): void {
console.log('Slideshow initialized with images:', this.images);
if(this.autoplay) {
this.startAutoSlide();
}
}
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
interface SlideContent {
imagesrc: string;
imagealt: string;
}
@Component({
selector: 'app-slideshow',
standalone: true,
imports: [CommonModule],
styles: [
`
.fade {
display: none;
}
.image-active {
display: block;
}
`,
],
template: `
<div id="carousel-container">
<div *ngIf=" images && images.length > 0" class="carousel-container">
<div *ngFor="let image of images; let i = index">
<img [src]="image.imagesrc" [alt]="image.imagealt"
[ngClass]="{'image-active': selectedIndex === i}"
(click)="selectImage(i)" class="fade">
</div>
<div *ngIf="indicators" class="carousel-dot-container">
<span class="dot" *ngFor="let dot of images; let i = index"
[ngClass]="{'dot-active': selectedIndex === i}"
(click)="selectImage(i)">
</span>
</div>
<a class="prev" (click)="previousSlide()">❮</a>
<a class="next" (click)="nextSlide()">❯</a>
</div>
</div>
`,
})
export class SlideShow {
@Input() images: SlideContent[] = [];
@Input() indicators = true;
@Input() autoplay = true;
selectedIndex = 0;
intervalId: any;
ngOnInit(): void {
console.log('Slideshow initialized with images:', this.images);
if (this.autoplay) {
this.startAutoSlide();
}
}
//sets index of image on dot/indicator click
selectImage(index: number): void {
this.selectedIndex = index;
}
startAutoSlide() {
this.intervalId = setInterval(() => {
this.nextSlide();
}, 3000); // Change slide every 3 seconds
}
nextSlide() {
this.selectedIndex = (this.selectedIndex + 1) % this.images.length;
}
previousSlide() {
this.selectedIndex =
(this.selectedIndex - 1 + this.images.length) % this.images.length;
}
}
@Component({
selector: 'app-root',
standalone: true,
imports: [SlideShow],
template: `
<app-slideshow [images]="images" [indicators]="true"></app-slideshow>
`,
})
export class App {
images = [
{
imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+1',
imagealt: 'example',
},
{
imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+2',
imagealt: 'example',
},
{
imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+3',
imagealt: 'example',
},
];
}
bootstrapApplication(App);