js扑克堆叠式卡片轮播图插件

简介

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

使用方法

在HTML文件中引入。

<script src="//code.jquery.com/hammer.min.js"></script>

HTML结构

<div id="board"></div>

初始化插件

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

lass 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_ALL, threshold: 0 }))
      
      // pass events data to custom callbacks
      this.hammer.on('tap', (e) => { this.onTap(e) })
      this.hammer.on('pan', (e) => { this.onPan(e) })
      
    }
    
  }