zoukankan      html  css  js  c++  java
  • (angular)版轮播(半成品)

    写到一半,发现写不下去了,因为ng中好像无法直接使用setinterval(),,所以之前 设想的通过更改ul列表的 top 值,来达到自动切换图片的思路行不通了,暂时先记录下来吧。

    不过,添加一个按钮,还是可以切换图片的,但这又违背了初衷,,,可能 得等到熟悉了angular中的动画,才会有新思路。

    <div id="box">
      <div class="list">
        <ul [style.top]="top">
          <li><img src="../assets/img/01.jpg" width="490" height="170"></li>
          <li><img src="../assets/img/02.jpg" width="490" height="170"></li>
          <li><img src="../assets/img/03.jpg" width="490" height="170"></li>
          <li><img src="../assets/img/04.jpg" width="490" height="170"></li>
          <li><img src="../assets/img/05.jpg" width="490" height="170"></li>
        </ul>
      </div>
      <ul class="count">
        <li *ngFor="let i of [0,1,2,3,4]"
    
        [class.current]="index == i"
        >
          {{ i + 1 }}
        </li>
      </ul>
    </div>
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      index:number = 0;
      top:any = 0;
      bOrder:boolean = true;
      timer:any;
      playTimer:any;
    
      onMouseover(){
    
      }
      constructor(){
    
      }
      ngOnInit(): void {
        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
        //Add 'implements OnInit' to the class.
    
      }
    
    
    }
  • 相关阅读:
    UVALive 6044(双连通分量的应用)
    hdu 3760(2次bfs求最短路)
    zoj 3370(二分+二分图染色)
    sgu 326(经典网络流构图)
    hdu 4291(矩阵+暴力求循环节)
    uva 11381(神奇的构图、最小费用最大流)
    hdu 4685(匹配+强连通分量)
    hdu 4496(并查集)
    hdu 4722(记忆化搜索)
    Linux安装Nginx使用负载均衡
  • 原文地址:https://www.cnblogs.com/sx00xs/p/14276043.html
Copyright © 2011-2022 走看看