这是一款js扑克堆叠式卡片轮播图插件。高轮播图的所有图片像扑克牌一样堆叠在一起，通过鼠标拖拽最上面的一张图片，就可以显示出下一张图片来。
使用方法
在HTML文件中引入。
<script src="//code.jquery.com/hammer.min.js"></script>
HTML结构
<div id="board"></div>
初始化插件
然后通过下面的代码来初始化插件。
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_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) })
}
}
onTap(e) {
// get finger position on top card
let propX = (e.center.x - e.target.getBoundingClientRect().left) / e.target.clientWidth
// get degree of Y rotation (+/-15 degrees)
let rotateY = 15 * (propX < 0.05 ? -1 : 1)
// change the transition property
this.topCard.style.transition = 'transform 100ms ease-out'
// rotate
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(' + rotateY + 'deg) scale(1)'
// wait transition end
setTimeout(() => {
// reset transform properties
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
}, 100)
}
onPan(e) {
if (!this.isPanning) {
this.isPanning = true
// remove transition properties
this.topCard.style.transition = null
if (this.nextCard) this.nextCard.style.transition = null
// get top card coordinates in pixels
let style = window.getComputedStyle(this.topCard)
let mx = style.transform.match(/^matrix\((.+)\)$/)
this.startPosX = mx ? parseFloat(mx[1].split(', ')[4]) : 0
this.startPosY = mx ? parseFloat(mx[1].split(', ')[5]) : 0
// get top card bounds
let bounds = this.topCard.getBoundingClientRect()
// get finger position on top card, top (1) or bottom (-1)
this.isDraggingFrom = (e.center.y - bounds.top) > this.topCard.clientHeight / 2 ? -1 : 1
}
// calculate new coordinates
let posX = e.deltaX + this.startPosX
let posY = e.deltaY + this.startPosY
// get ratio between swiped pixels and the axes
let propX = e.deltaX / this.board.clientWidth
let propY = e.deltaY / this.board.clientHeight
// get swipe direction, left (-1) or right (1)
let dirX = e.deltaX < 0 ? -1 : 1
// calculate rotation, between 0 and +/- 45 deg
let deg = this.isDraggingFrom * dirX * Math.abs(propX) * 45
// calculate scale ratio, between 95 and 100 %
let scale = (95 + (5 * Math.abs(propX))) / 100
// move top card
this.topCard.style.transform = 'translateX(' + posX + 'px) translateY(' + posY + 'px) rotate(' + deg + 'deg) rotateY(0deg) scale(1)'
// scale next card
if (this.nextCard) this.nextCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(' + scale + ')'
if (e.isFinal) {
this.isPanning = false
let successful = false
// set back transition properties
this.topCard.style.transition = 'transform 200ms ease-out'
if (this.nextCard) this.nextCard.style.transition = 'transform 100ms linear'
// check threshold
if (propX > 0.25 && e.direction == Hammer.DIRECTION_RIGHT) {
successful = true
// get right border position
posX = this.board.clientWidth
} else if (propX < -0.25 && e.direction == Hammer.DIRECTION_LEFT) {
successful = true
// get left border position
posX = - (this.board.clientWidth + this.topCard.clientWidth)
} else if (propY < -0.25 && e.direction == Hammer.DIRECTION_UP) {
successful = true
// get top border position
posY = - (this.board.clientHeight + this.topCard.clientHeight)
}
if (successful) {
// throw card in the chosen direction
this.topCard.style.transform = 'translateX(' + posX + 'px) translateY(' + posY + 'px) rotate(' + deg + 'deg)'
// wait transition end
setTimeout(() => {
// remove swiped card
this.board.removeChild(this.topCard)
// add new card
this.push()
// handle gestures on new top card
this.handle()
}, 200)
} else {
// reset cards position
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
if (this.nextCard) this.nextCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(0.95)'
}
}
}
push() {
let card = document.createElement('div')
card.classList.add('card')
// add you own content to the cards
if (this.board.firstChild) {
this.board.insertBefore(card, this.board.firstChild)
} else {
this.board.append(card)
}
}
}
该js扑克堆叠式卡片轮播图插件的github网址为：https://github.com/simonepm/likecarousel
