1 @Component({
 2     selector: 'my-slide-img',
 3     templateUrl: 'slide-img.component.html',
 4     styleUrls: ['slide-img.component.css'],
 5     animations: [
 6         trigger('imgMove', [
 7             /** 不显示 */
 8             state('off', style({'display': 'none', 'z-index': '0', 'transform': 'translateX(0)'})),
 9             /** 上一张图片 */
10             state('prev', style({'z-index': '1',
11             'transform': 'translateX(-100%)'})),
12             /** 下一张图片 */
13             state('next', style({'z-index': '2', 'transform': 'translateX(100%)'})),
14             /** 当前图片 */
15             state('on', style({'z-index': '3', 'transform': 'translateX(0)'})),
16             transition('prev=>on', [
17                 animate('0.3s ease-in')
18             ]),
19             transition('next=>on', [
20                 animate('0.3s ease-in')
21             ]),
22             transition('on=>prev', [
23                 animate('0.3s ease-in')
24             ]),
25             transition('on=>next', [
26                 animate('0.3s ease-in')
27             ])
28         ])
29     ]
30 })
31 export class SlideImgComponent { }

1 <div class="imgs">
2     <img src="{{img.Url}}" alt="" class="img"
3     *ngFor="let img of imgs;let i=index"
4     (mySwipe)="Change($event)"
5     [@imgMove]="ImgState(i)">
6 </div>
7 
8 <div class="btn" (click)="Prev()">Prev</div>
9 <div class="btn" (click)="Next()">Next</div>

 1 .imgs{
 2     position: relative;width: 100%;height: 15em;
 3     overflow: hidden;
 4 }
 5 .img{
 6     position: absolute;
 7     width: 100%;
 8     height: 100%;
 9     background: pink;
10     transition: 0.2s;
11 }
12 .btn{
13     display: inline-block;
14     padding: 1em 2em;font-size: 1em;border-radius: 0.5em;
15     border: 1px solid #ddd;cursor: pointer;
16     margin: 1em;background: #eee;box-shadow: 0.1em 0.1em 0.2em #aaa;
17 }
18 .btn:active{
19     background: #eee;
20     box-shadow: none;
21 }

 1 import { Component, OnInit, Input,
 2     animate,
 3     style,
 4     transition,
 5     trigger,
 6     state,
 7     HostListener
 8 } from '@angular/core';
 9 import { SlideImg } from './slide-img.interface';
10 
11 @Component({
12     selector: 'my-slide-img',
13     templateUrl: 'slide-img.component.html',
14     styleUrls: ['slide-img.component.css'],
15     animations: [
16         trigger('imgMove', [
17             /** 不显示 */
18             state('off', style({'display': 'none', 'z-index': '0', 'transform': 'translateX(0)'})),
19             /** 上一张图片 */
20             state('prev', style({'z-index': '1',
21             'transform': 'translateX(-100%)'})),
22             /** 下一张图片 */
23             state('next', style({'z-index': '2', 'transform': 'translateX(100%)'})),
24             /** 当前图片 */
25             state('on', style({'z-index': '3', 'transform': 'translateX(0)'})),
26             transition('prev=>on', [
27                 animate('0.3s ease-in')
28             ]),
29             transition('next=>on', [
30                 animate('0.3s ease-in')
31             ]),
32             transition('on=>prev', [
33                 animate('0.3s ease-in')
34             ]),
35             transition('on=>next', [
36                 animate('0.3s ease-in')
37             ])
38         ])
39     ]
40 })
41 export class SlideImgComponent {
42     @Input() public imgs: SlideImg[];
43     public current;
44     constructor() {
45         this.current = 0;
46     }
47     public ImgState(index) {
48         if (this.imgs && this.imgs.length) {
49             if (this.current === 0) {
50                 return index === 0 ? 'on' :
51                 index === 1 ? 'next' :
52                 index === this.imgs.length - 1 ? 'prev' :
53                 'off';
54             } else if (this.current === this.imgs.length - 1) {
55                 return index === this.imgs.length - 1 ? 'on' :
56                 index === this.imgs.length - 2 ? 'prev' :
57                 index === 0 ? 'next' :
58                 'off';
59             }
60             switch (index - this.current) {
61                 case 0:
62                     return 'on';
63                 case 1:
64                     return 'next';
65                 case -1:
66                     return 'prev';
67                 default:
68                     return 'off';
69             }
70         } else {
71             return 'off';
72         }
73     }
74     public Next() {
75         this.current = (this.current + 1) % this.imgs.length;
76     }
77     public Prev() {
78         this.current = this.current - 1 < 0 ? this.imgs.length - 1 : this.current - 1;
79     }
80 
81     public Change(e) {
82         if (e === 'left') {
83             this.Next();
84         } else if (e === 'right') {
85             this.Prev();
86         }
87     }
88 }

 1 import { Directive, Input, HostListener, Output, EventEmitter } from '@angular/core';
 2 
 3 @Directive({ selector: '[mySwipe]' })
 4 export class SwipeDirective {
 5     @Output() public mySwipe = new EventEmitter<string>();
 6 
 7     private touchStartX;
 8     private touchStartY;
 9     @HostListener('touchstart', ['$event']) public onTouchStart(e) {
10         this.touchStartX = e.changedTouches[0].clientX;
11         this.touchStartY = e.changedTouches[0].clientY;
12     }
13     @HostListener('touchend', ['$event']) public onTouchEnd(e) {
14         let moveX = e.changedTouches[0].clientX - this.touchStartX;
15         let moveY = e.changedTouches[0].clientY - this.touchStartY;
16         if (Math.abs(moveY) < Math.abs(moveX)) {
17             /**
18              * Y轴移动小于X轴 判定为横向滑动
19              */
20             if (moveX > 50) {
21                 this.mySwipe.emit('right');
22             } else if (moveX < -50) {
23                 this.mySwipe.emit('left');
24             }
25         } else if (Math.abs(moveY) > Math.abs(moveX)) {
26             /**
27              * Y轴移动大于X轴 判定为纵向滑动
28              */
29             if (moveY > 50) {
30                 this.mySwipe.emit('down');
31             } else if (moveY < -50) {
32                 this.mySwipe.emit('up');
33             }
34         }
35         this.touchStartX = this.touchStartY = -1;
36     }
37 }