jQuery结合CSS3实现超炫酷切割轮播图效果

使用方法：

引入CSS核心样式

.slider-outer{
    width: 560px;
    height: 300px;
    margin: 150px auto;
    background-color: #f60;
    position: relative;
}
.img-item{
    position: absolute;
    width: 112px;
    height: 100%;
    background-color: #f10;
    transition: all 1.5s;
    /*设置子元素在3D空间中呈现*/
    transform-style: preserve-3d;
}
/*让图片可以构成一个有四个面的长方体 start*/
.img{
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
}
.img:nth-child(1){
    background: url(images/1.png) no-repeat;
    transform: rotateX(0deg) translateZ(150px);
}
.img:nth-child(2){
    background: url(images/2.png) no-repeat;
    transform: rotateX(-90deg) translateZ(150px);
}
.img:nth-child(3){
    background: url(images/3.png) no-repeat;
    transform: rotateX(-180deg) translateZ(150px);
}
.img:nth-child(4){
    background: url(images/4.png) no-repeat;
    transform: rotateX(-270deg) translateZ(150px);
}
/*让图片可以构成一个有四个面的长方体 end*/
.btns{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 70px;
    margin-top: -35px;
}
.prev,
.next{
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: rgba(0,0,0,.3);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
}
.prev{
    left: 0;
}
.next{
    right: 0;
}

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

插件JS结构

$(function (){
        var num = 0;
        $("#j_silder_outer .img-item").each(function(index, el) {
            $(this).css({
                "left":$(this).width() * index + "px",
                /*让每个img-item延时一定时间执行动画*/
                "transitionDelay": index * 0.3 + "s"
            });
            $(this).find(".img").css({
                "backgroundPosition": -$(this).width() * index + "px"
            });;
        });
        $(".prev").on("click",function (){
            $("#j_silder_outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");
        });
        $(".next").on("click",function (){
            $("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
        });
        
        var timejg=4000;//轮播间隔时间
        var time = setInterval(move,timejg);
        function move(){
            $("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
        }
        $('.slider-outer').hover(function(){
            clearInterval(time);
        },function(){
            time = setInterval(move,timejg);
        });
    })

HTML结构

<div class="slider-outer" id="j_silder_outer">
    <div class="img-item">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="img-item">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="img-item">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="img-item">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="img-item">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="btns" data-num="0">
        <div class="prev"><</div>
        <div class="next">></div>
    </div>
</div>