js实现上下轮播

let a;
adds();
$('#ck_center_top2_ul').mouseover(function() {
    //鼠标移入
    clearInterval(a);
}).mouseleave(function() {
    //鼠标移出
    adds();
});
function adds() {
    a = setInterval(function() {
        addadd()
    }, 1000)
    function addadd() {
        var oul = document.getElementById("ck_center_top2_ul");
        var olis = oul.getElementsByTagName("li")[0];
        var delLi = $('#ck_center_top2_ul li').eq(0);
        olis.className = "flipOutX";
        setTimeout(function() {
            olis.style.cssText = "height:0;padding:0;border-width:0;margin:0";
        }, 280);
        setTimeout(function() {
            olis.classList.remove('flipOutX');
            oul.removeChild(olis)

            olis.style.cssText = "    height: 20px;border-width:1px;";

            oul.appendChild(olis)
        }, 1000)
    }
}

js实现上下轮播

轮播动画

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    animation-duration: .7s;
    animation-timing-function: linear;
    -webkit-animation-duration: .7s;
    animation-fill-mode: forwards;
    /*规定对象动画时间之外的状态*/
    -webkit-animation-fill-mode: forwards
}