卡片式轮播图 效果 实现

基于 react 实现，vue 类似

效果图

思路

• 效果图中 绿色边框为 轮播图区域
• 水平式 多张图片 水平排列 整体宽度 为 单张图片n倍 translateX 位移方式 一次整体移动一张图片宽度
• 层叠式 所有图片居中堆叠 动态计算 左右 每张图片 translateX 位移 、 scale 缩放 、 zIndex 层级，实现堆叠效果

jsx

import React, { Component } from 'react'
import './cardCarousel.less'
export default class CardCarousel extends Component {
    constructor(props){
        super(props)
        this.state = {
            list:[1,2,3,4,5,6],
            current: 1, // 轮播图当前 index
            itemWidth:0, //  图片区域 宽度
            out: 3,  // 堆叠式 外部看到的数量 （左右各相同） 不限制 可以设置 0 或 大于轮播图数量
            offset:80, // 堆叠式 外部偏移量 (产生堆叠效果)
        }
    }
    componentDidMount(){
        // 获取轮播图片区域宽度
        const width = this.refs.swiperitem.clientWidth
        this.setState({
            itemWidth:width
        })
    }
    // 上一张
    onPrev = (index) => {
        const length = this.state.list.length
        if( index - 1 < 0) {
            this.setState({
                current : length -1
            })
        }else {
            this.setState({
                current : index -1 
            })
        }
    }
    // 下一张
    onNext = (index) => {
        const length = this.state.list.length
        if ( index + 1 === length) {
            this.setState({
                current: 0
            })
        }else{
            this.setState({
                current: index + 1
            })
        }
    }
    render() {
        let  {list,current,itemWidth,out,offset} = this.state
        // 水平式   计算轮播区整体位移
        let x = current === 0 ? 0 : - current*itemWidth 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49