#fp-box，.fp-img-box li, .fp-img-box{
                        width:100%;
                        padding-bottom: 30%;
                        height: 0;
                    }
                    .fp-box{
                        position: relative;
                        overflow: hidden;
                    }
                    .fp-img-box{
                        margin-bottom: 0;
                        -webkit-perspective: 800px;
                        perspective: 800px;
                        -webkit-transform-style: preserve-3d;
                        transform-style: preserve-3d;
                    }
                    .fp-img-box li{
                        position: absolute;
                        top:0;
                        left: 0;
                        visibility: hidden;
                    }
                    .fp-img-box li img{
                        width: 100%;
                    }
                    .fp-num-box{
                        position: absolute;
                        bottom: 5px;
                        width: 100%;
                        text-align: center;
                        margin-bottom: 0;
                    }
                    .fp-num-box li{
                        width: 12px;
                        height: 12px;
                        background: #fff;
                        border: 2px solid #75aaa2;
                        display: inline-block;
                        border-radius: 50%;
                        margin: 0 2px;
                        cursor: pointer;
                    }
                    .fp-num-box li.active{
                        background: #75aaa2;
                        border: 2px solid #fff;
                    }
                    .fp-img-box li.show{
                        visibility: visible;
                        z-index: 10;
                    }
                    .fp-img-box li.show.right{
                        -webkit-animation: showright 1s ease;
                        animation: showright 1s ease;
                    }
                    .fp-img-box li.hides.right{
                        -webkit-animation: hideright 1s ease;
                        animation: hideright 1s ease;
                    }
                    .fp-img-box li.show.left{
                        -webkit-animation: showleft 1s ease;
                        animation: showleft 1s ease;
                    }
                    .fp-img-box li.hides.left{
                        -webkit-animation: hideleft 1s ease;
                        animation: hideleft 1s ease;
                    }
                    @-webkit-keyframes showright {
                        0%{ -webkit-transform: translateZ(-200px)}
                        50%{ -webkit-transform: translate(40%,0) scale(0.8) rotateY(-30deg)}
                        100%{ -webkit-transform: translateZ(0px)}
                    }
                    @keyframes showright {
                        0%{ transform: translateZ(-200px)}
                        50%{ transform: translate(40%,0) scale(0.8) rotateY(-30deg)}
                        100%{ transform: translateZ(0px)}
                    }
                    @-webkit-keyframes hideright {
                        0%{ -webkit-transform: translateZ(0px);visibility: visible;}
                        50%{ -webkit-transform: translate(-40%, 0) scale(0.8) rotateY(30deg)}
                        100%{ -webkit-transform: translateZ(-200px);visibility: hidden;}
                    }
                    @keyframes hideright {
                        0%{ transform: translateZ(0px);visibility: visible;}
                        50%{ transform: translate(-40% ,0) scale(0.8) rotateY(30deg)}
                        100%{ transform: translateZ(-200px);visibility: hidden}
                    }
                    @-webkit-keyframes showleft {
                        0%{ -webkit-transform: translateZ(-200px)}
                        50%{ -webkit-transform: translate(40%, 0) scale(0.8) rotateY(-30deg)}
                        100%{ -webkit-transform: translateZ(0px)}
                    }
                    @keyframes showleft {
                        0%{ transform: translateZ(-200px)}
                        50%{ transform: translate(40% ,0) scale(0.8) rotateY(-30deg)}
                        100%{ transform: translateZ(0px)}
                    }
                    @-webkit-keyframes hideleft {
                        0%{ -webkit-transform: translateZ(0px);visibility: visible;}
                        50%{ -webkit-transform: translate(-40%, 0) scale(0.8) rotateY(30deg)}
                        100%{ -webkit-transform: translateZ(-200px);visibility: hidden;}
                    }
                    @keyframes hideleft  {
                        0%{ transform: translateZ(0px);visibility: visible;}
                        50%{ transform: translate(-40% ,0) scale(0.8) rotateY(30deg)}
                        100%{ transform: translateZ(-200px);visibility: hidden}
                    }

                

                    $(function () {
                        var img = $(".fp-img-box li");
                        var size = img.size();

                        //生成小圆点
                        var _LiHtml='';
                        for(var i=0;i< size;i++){
                            _LiHtml+=' 
 
';
                        }
                        $(".fp-num-box").append(_LiHtml);

                        //初始状态
                        var num = $(".fp-num-box li");
                        img.eq(0).addClass("show");
                        num.eq(0).addClass("active").siblings().removeClass("active");
                        var t = setInterval( move,3000);
                        //主函数
                        function move(){
                            var i = $(".fp-num-box li.active").index();
                            i++;
                            // console.log(i);
                            if(i>=size){
                                i=0;
                            }else if(i<=0){
                                i=size;
                            }
                            img.eq(i).attr("class","show right");
                            img.eq(i-1).attr("class","hides right");
                            num.eq(i).addClass("active").siblings().removeClass("active");
                        }
                        //圆点点击
                        num.click(function () {
                            clearInterval(t);
                            var index = $(".fp-num-box li.active").index();
                            var i = $(this).index();
                            //点击已激活左侧
                            if(index>i){
                                img.eq(i).attr("class","show left");
                                img.eq(index).attr("class","hides left");
                            //点击已激活右侧
                            }else if(index < i){
                                img.eq(i).attr("class","show right");
                                img.eq(index).attr("class","hides right");
                            }else{
                            }
                            num.eq(i).addClass("active").siblings().removeClass("active");
                            t = setInterval(move,3000);
                        });
                    });