美文网首页
angular下实现轮播图

angular下实现轮播图

作者: 洛西见 | 来源:发表于2020-02-10 11:45 被阅读0次

angular下实现轮播图不需要像jq那样操作dom,本人将轮播图封装成了一个组件,实现的效果图如下

代码如下

1.html文件


  <ul [@carousel] = 'state'>

    <li class='imgP' [ngClass]="{'activeLi': img.state===true}" *ngFor='let img of images,let i =index;' (mouseleave)='start()' (touchstart)="getStartX($event)" (touchend)="getEndX(i)" (touchmove)="getMoveX($event)">

      <img [src]="url+img.name"  *ngIf='img.state'>

    </li>

  </ul>

  <div class='dot' fxLayout="row" fxLayoutAlign="center end" fxLayoutGap="15px">

    <div class='circle' [class.active]='img.state'  *ngFor='let img of images' (mouseenter)="clickDot(img.id)" (mouseleave)='blurDot()'>

    </div>

  </div>

</div>

#### 2.ts文件

import { Component, OnInit, OnDestroy} from '@angular/core';

import {trigger, style, transition, query, animate, group} from '@angular/animations';

@Component({

  selector: 'app-carousel',

  templateUrl: './carousel.component.html',

  styleUrls: ['./carousel.component.scss'],

  animations: [

    trigger('carousel', [

      transition(':increment', [

        group([

            query(':enter', [

                  style({transform: 'translateX(-100%)'}),

                  animate('1s')

              ]),

              query(':leave',[

                  animate('1s', style({transform: 'translateX(100%)'}))

              ])

          ])

        ]),

      transition(':decrement', [

        group([

          query(':enter', [

                style({transform:  'translateX(100%)'}),

                animate('1s')

            ]),

            query(':leave', [

                animate('1s', style({transform: 'translateX(-100%)'}))

            ])

        ])

      ]),

    ])

  ]

})

export class CarouselComponent implements OnInit, OnDestroy {

  url = '/assets/images/';        //图片文件路径

  state = 0;                                 

  timer: any;                              //定时器

  imgIndex = 2;

  startX: any;                             //起始触摸位置

  endX: any;                              //离开触摸位置

  startTime: number;              //其实触摸时间

  endTime: number;                //结束触摸时间

  screenWidth = document.documentElement.offsetWidth;

  images = [

    {id: 1, name: 'marketBg1.jpg', state: true},

    {id: 2, name: 'marketBg2.jpg', state: false},

    {id: 3, name: 'marketBg3.jpg', state: false},

    {id: 4, name: 'marketBg4.jpg', state: false},

  ];

  constructor() { }

//组件初始化后立即调用轮播方法fn()

 ngOnInit() {

    this. timer = setInterval(() => this.fn(), 5000);

  }

  ngOnDestroy() {

    // 停止轮播

    this.stop();

    //清空定时器

     clearInterval(this. timer);

  }

  fn() {

    this. imgIndex++;

    //轮播到最后一张图片时将图片索引置为零

    if (this.imgIndex> this.images.length - 1) {

        this.imgIndex = 0;

    }

 this.images.forEach(val => {

      val.state = false;

    });

    this.images[this.imgIndex].state = true;

  }

   //结束轮播

  stop() {

    clearInterval(this. timer);

  }

   //开始轮播

  start() {

    this. timer = setInterval(this.fn.bind(this), 5000);

  }

   //点击圆点切换轮播图,停止自动轮播

  clickDot(dotIndex) {

    this.imgIndex = dotIndex - 1;

    this.images.forEach(val => {

      val.state = false;

    });

    this.images[dotIndex - 1].state = true;

    this.stop();

  }

  blurDot() {

    this.start();

  }

    //获取初始滑动位置

  getStartX(e) {

    this.stop();

    this.startTime = Date.now();

    const touch = e.touches[0] || e.changedTouches[0];

    this.startX = touch.pageX;

  }

  // 获取滑动距离

  getMoveX(e) {

    const touch = e.touches[0] || e.changedTouches[0];

    this.endX = touch.pageX;

  }

  // 滑动结束位置

  getEndX(imgIndex) {

    const dx =  this.endX - this.startX;

    const dTime = Date.now() - this.startTime;

    if (Math.abs(dx) > this.screenWidth / 3 || (dTime < 300 && Math.abs(dx) > 30)) {

      this.images.forEach(val => {

        val.state = false;

      });

        // 右滑动

      if (dx > 0) {

        const leftDragIndex  = imgIndex === this.images.length - 1 ? 0 : imgIndex + 1;

        this.images[leftDragIndex].state = true;

      } else { 

        // 左滑动

        const rightDragIndex  = imgIndex === 0 ? this.images.length - 1 : imgIndex - 1;

        this.images[rightDragIndex].state = true;

      }

    }

    //确保清空旧的定时器

    this.stop();

    this.start();

  }

}

#### 3.css文件

div.container {

  position: relative;

  width: 100%;

  height: 100%;

}

  ul {

    position:relative;

    height: 100%;

    width: 100%;

    margin: 0;

    padding: 0;

  }

    li.activeLi {

      z-index: 5;

    }

    li.imgP{

      position: absolute;

      list-style: none;

      width: 100%;

      height: 100%;

      left: 0;

      right: 0;

    }

    img {

      border: none;

      height:  100%;

      width: 100%;

      border-radius: 0 0 16px 16px;

    }

 div.dot{

    position:absolute;

    display:flex;

    margin-top: 20px;

    justify-content:center;

    align-items:center;

    z-index: 6;

  }

   div .circle{

      float:left;

      background: #fff;

      width: 8px;

      height: 8px;

      border-radius: 50%;

    }

    div.active{

      width: 20px;

      height: 6px;

      border-radius: 2px;

      overflow: hidden;

      border: 1px solid #FF5F5F;

      background: #FF5F5F;

    }

水平有限,互相学习,如有不足,感谢指正

相关文章

  • angular下实现轮播图

    angular下实现轮播图不需要像jq那样操作dom,本人将轮播图封装成了一个组件,实现的效果图如下 代码如下 1...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 用js原生实现轮播图

    用jquery实现轮播图非常简单的啦!有没有想过用原生js实现轮播图呢???今天琢磨了一下,摸索出来一个,就和大家...

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • Swift轮播图

    最近在学习swift,就用swift实现轮播图来练习一下 轮播图的创建有两种方式: 显然使用collectionV...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • iOS 轮播图(三个UIImageView轮播)

    提到app轮播图,我们会想到好多种实现方法。这里我给大家介绍一下用三个UIImageView创建轮播图的方法,这里...

  • 传统&呼吸 轮播

    传统的轮播图 一个 carousel 轮播图,图片实现自动轮播,可以左右按钮播放,点小圆点也能实现换图。同时设置节...

网友评论

      本文标题:angular下实现轮播图

      本文链接:https://www.haomeiwen.com/subject/yghaxhtx.html