ios 扑克牌效果轮播_js扑克堆叠式卡片轮播图插件

这是一款js扑克堆叠式卡片轮播图插件。高轮播图的所有图片像扑克牌一样堆叠在一起，通过鼠标拖拽最上面的一张图片，就可以显示出下一张图片来。

使用方法

在HTML文件中引入。

HTML结构

初始化插件

然后通过下面的代码来初始化插件。

class Carousel {

constructor(element) {

this.board = element

// add first two cards programmatically

this.push()

this.push()

// handle gestures

this.handle()

}

handle() {

// list all cards

this.cards = this.board.querySelectorAll('.card')

// get top card

this.topCard = this.cards[this.cards.length-1]

// get next card

this.nextCard = this.cards[this.cards.length-2]

// if at least one card is present

if (this.cards.length > 0) {

// set default top card position and scale

this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'

// destroy previous Hammer instance, if present

if (this.hammer) this.hammer.destroy()

// listen for tap and pan gestures on top card

this.hammer = new Hammer(this.topCard)

this.hammer.add(new Hammer.Tap())

this.hammer.add(new Hammer.Pan({ position: Hammer.position