自制人物卡片轮播组件，自动轮播，点击切换

由于工作需要，写了一个人物卡片轮播的组件，卡片内容包括照片，姓名及介绍。要求人物个数大于等于五张，设置每次只显示五张卡片，点击后方的卡片时该卡片会跳到最中间显示。不点击时自动轮播。效果如上。

其实总的逻辑非常简单，大体的思路就是改变class属性。设置需要显示的五个卡片的class为 info-1,...,info-5。不显示的卡片则为 info-none。

通过点击更换显示卡片索引，根据显示卡片索引给它以及它左右两个卡片添加class属性 info-#{index}，并将其他卡片设为 info-none 即可。

我之前最困惑的地方在于如何做出翻转的特效，差点就要手撕一个3d坐标转换的方法了。。还好得知 css3 有一个很溜的属性 transform，包含了一些现成的动画方法，例如 translate, scale,rotate，功能非常强大，建议查阅文档，动手尝试一番。本组件主要用到的是 translate3d 以及 scale3d。具体见代码。

基本功能都差不多实现了，只需要再利用 setInterval 和 clearInterval 设置定时操作，来实现自动轮播即可。注意，每次鼠标点击选择后，需要清空时间，重新计时。

代码的话，我是用的 vue 框架，逻辑部分的用的是 coffeescript，需要看JS的话就，emmmmm，去 coffeescript官网 可以自动转为JS （其实都差不多辣，逃

<template>
    <div class="card-block">
        <ul class="card-list">
            <li class="card-info" v-for="card in cardInfo" :value="$index">
                <img :src="card.img"/>
                <h5>{{ card.title }}</h5>
                <p>{{ card.content }}</p>
            </li>
        </ul>
    </div>
</template>
<script lang="coffee">
    module.exports =
        props:
            # 理论上卡片数量需要大于等于五张
            cardInfo:
                type: Array
                default: []
            # 是否自动轮播
            autoDisplay:
                type: Boolean
                default: true

        data: ->
            # 卡片总数
            cardTotal: 5
            # 显示卡片数
            displayCardNum: 5
            # 当前卡片下标
            currentCard: 2
            # 用于设置自动轮播时间
            autoChangeTimer: -1

        methods:
            # 初始化
            InitCardDisplay: ->
                for i in [0 .. 4]
                    $('.card-list').find("li[value$='#{i}']").addClass "info-#{i+1}"
                for i in [5 .. @cardTotal - 1]
                    $('.card-list').find("li[value$='#{i}']").addClass "info-none"
                @setAutoChange()

            # 当 currentCard 更换时调用
            changeCard: ->
                for i in [0 .. @cardTotal - 1]
                    for j in [1 .. 5]
                        $('.card-list').find("li[value$='#{i}']").removeClass "info-#{j}"
                    $('.card-list').find("li[value$='#{i}']").addClass "info-none"

                leftCardId = @currentCard - 2
                rightCardId = @currentCard + 2
                index = 1
                for i in [leftCardId .. rightCardId]
                    i = (i + @cardTotal) % @cardTotal
                    $('.card-list').find("li[value$='#{i}']").removeClass "info-none"
                    $('.card-list').find("li[value$='#{i}']").addClass "info-#{index}"
                    index += 1
                @setAutoChange()

            # 设置自动轮播
            setAutoChange: ->
                if !@autoDisplay
                    return
                @clearAutoChange()
                @autoChangeTimer = setInterval =>
                    @currentCard = (@currentCard + 1) % @cardTotal
                    @changeCard()
                , 3000

            # 清除自动轮播
            clearAutoChange: ->
                clearInterval @autoChangeTimer
                @autoChangeTimer = -1

        ready: ->
            @cardTotal = @cardInfo.length
            @InitCardDisplay()
            @setAutoChange()

            vm = @
            $('.card-list').on 'click', 'li', ->
                vm.currentCard = $(this).val()
                vm.clearAutoChange()
                vm.changeCard()

</script>
<style lang="less">
.card-block {
    width: 400px;
    position: relative;
    margin: 10px auto;
    .card-list {
        padding: 0px;
        position: relative;
        z-index: 100;
        height: 375px;
        width: 100%;
        margin: 20px auto;
        .card-info {
            -webkit-transition: all 0.6s;
            transition: all 0.6s;
            background-color: white;
            position: absolute;
            border: 1px solid #C4C0BB;
            list-style-type: none;
            text-align: center;
            width: 300px;
            height: 375px;
            padding: 20px 25px;
            img {
                border-radius: 50%;
                border: 1px solid #C4C0BB;
                height: 100px;
                width: 100px;
            }
            h5 {
                margin: 15px 0;
            }
            p {
                font-size: 10px;
            }
        }
        .info-1 {
            left: 0;
            z-index: 100;
            filter: blur(2px);
            -webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
            transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1)
        }
        .info-2 {
            left: 100px;
            z-index: 110;
            filter: blur(1px);
            -webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
            transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
        }
        .info-3 {
            left: 200px;
            z-index: 120;
            -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
        }
        .info-4 {
            left: 300px;
            z-index: 110;
            filter: blur(1px);
            -webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
            transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
        }
        .info-5 {
            left: 400px;
            z-index: 100;
            filter: blur(2px);
            -webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
            transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1)
        }
        .info-none {
            display: none;
        }
    }
}
</style>