angular计时器切换图片和map存储-CSDN博客

本文链接：https://blog.csdn.net/cf8833/article/details/126290769

本文介绍了如何使用AngularJS实现一个纯代码的图片轮播功能，包括控制图片切换秒数和从后端获取数据存入Map中进行切换。通过步骤1、步骤2、步骤3详细阐述了这一过程。

摘要由CSDN通过智能技术生成

说明：最近碰到一个需求，纯代码实现轮播图切换的功能，就是开启图片轮播循环和关闭图片轮播循环，可以控制图片切换秒数，把后端拿出来的数据，存储到map中，然后通过切换key，实现图片切换功能

step1:

import {Component, OnInit} from '@angular/core';
import {Student} from "./Student";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'untitled1';
  url = "";
  name = "";
  age = 0;
  position = 0;
  isCheck = true;
  tv="";
  map = new Map();

  ngOnInit(): void {
    this.map.set(0, new Student("张飞", 22, "http://www.gov.cn/xinwen/2022-06/26/5697838/images/b63857995c49409cb6478096e79af02e.jpg"));
    this.map.set(1, new Student("赵云", 18, "http://www.gov.cn/xinwen/2022-06/26/5697838/images/a1d8a546c2dd4be3b23d40968fd22a16.jpg"));
    this.map.set(2, new Student("刘备", 32, "http://www.gov.cn/xinwen/2022-06/26/5697838/images/7e6cd10bb1254c0a814dc36aa4a6ecf1.jpg"));
    this.getView(this.position);
    console.log(this.map)
    setInterval(() => this.trick(), 1500)
    if (this.isCheck){
      this.tv = "暂停自动播放图片";
    }else{
      this.tv = "开启自动播放图片";
    }
  }

  getCheck(): void {
    /*点击 按钮 切换图片*/
    this.position++;
    this.getView(this.position);
    console.log(this.url)
  }

  getView(position: number): void {
    this.url = this.map.get(position % 3).url
    this.name = this.map.get(position % 3).name
    this.age = this.map.get(position % 3).age
  }

  getStopView(): void {
    this.isCheck = !this.isCheck;
    if (this.isCheck){
      this.tv = "暂停自动播放图片";
    }else{
      this.tv = "开启自动播放图片";
    }
    this.map.forEach(function (value, key, map) {
      if (key==2){
        console.log(map.get(key).name)
      }
    })
  }

  private trick() {
    this.position++;
    console.log(this.position)
    if (this.isCheck) {
      this.getView(this.position);
    }
  }
}

step2:

export class Student {

  /*
  * 姓名 年龄 图片地址
  * */

  private _name: String = "";
  private _age: number = 0;
  private _url: String = "";


  constructor(name: String, age: number, url: String) {
    this._name = name;
    this._url = url;
    this._age = age;
  }


  get url(): String {
    return this._url;
  }

  set url(value: String) {
    this._url = value;
  }

  get name(): String {
    return this._name;
  }

  set name(value: String) {
    this._name = value;
  }

  get age(): number {
    return this._age;
  }

  set age(value: number) {
    this._age = value;
  }
}

step3:

<div>
  <div>
    <img src="{{this.url}}"/>
    <div>
      <div>
        <div>
          <div style="display: flex">
            <div>姓名：</div>
            <div>{{this.name}}</div>
          </div>
          <div style="display: flex">
            <div>年龄：</div>
            <div>{{this.age}}</div>
          </div>
          <div style="display: flex">
          <div (click)="getCheck()">
            <div style="width: 80px;text-align: center;background-color: dodgerblue;color: white;outline: none">切换</div>
          </div>
          <div (click)="getStopView()">
            <div style="width: 150px;margin-left: 120px;text-align: center;background-color: dodgerblue;color: white;outline: none">{{this.tv}}</div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

end