实现划桨板块的自动轮播

这个效果主要应用了3D旋转的效果。通过背景图的切割来改变图片。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        perspective:880px;/*视镜*/
    }
    .box{
        /*overflow:hidden;*/
        width:1000px;
        height:500px;
        margin:100px auto;
    }
    .box div{
        float:left;
        width:500px;
        height:500px;
    }
    .box div p{
        width:500px;
        height: 100px;
        position: relative;
        transform-style:preserve-3d;
    }
    .box div p span{
        width:500px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-background-size:1000px 500px;
        background-size:1000px 500px;
        background:#333;
    }
    .box div p .contrary{
        transform:rotateY(180deg);
    }
</style>

body部分

<div class="box">
    <div class="left">
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
    </div>
    <div class="right">
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
        <p>
            <span class="front"></span>
            <span class="contrary"></span>
        </p>
    </div>
</div>

js部分

<script type="text/javascript">
    var box=document.querySelector(".box");
    var box_leftp=document.querySelectorAll(".left p");
    var box_rightp=document.querySelectorAll(".right p");
    var n=0;
    var reg=[0,0,0,0,0];
    //添加图片的数组，这里写入图片的路径。
    //开始和最后一个是同一张图片。
    var arrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/1.jpg"]
    //设置初始的值
    for(var i=0;i<box_leftp.length;i++){
            //添加图片在正反两面的图，利用背景切割图片。
            //这里是左边的一部分切割的图。利用变量来实现背景位置的变化这是正面的部分
            box_leftp[i].querySelector(".front").style.cssText="background-image:url("+arrImg[n]+");background-position:0px "+i*-100+"px;background-size:1000px 500px;";
            //这里是左边的反面图片
            box_leftp[i].querySelector(".contrary").style.cssText="background-image:url("+arrImg[n+1]+");background-position:0px "+i*-100+"px;background-size:1000px 500px;";
            //这里是右边的正面图片
            box_rightp[i].querySelector(".front").style.cssText="background-image:url("+arrImg[n]+");background-position:-500px "+i*-100+"px;background-size:1000px 500px;";
            //这里是右边的反面图片
            box_rightp[i].querySelector(".contrary").style.cssText="background-image:url("+arrImg[n+1]+");background-position:-500px "+i*-100+"px;background-size:1000px 500px;";
        }
    setInterval(autoplay,4000);
    function autoplay(){
        for(var j=0;j<reg.length;j++){
            reg[j]=0;
        }
        //每一次调用都还原原来的样子。并且图片通过数组来改变下一个版面的两张图
        for(var i=0;i<box_leftp.length;i++){
            box_leftp[i].querySelector(".front").style.cssText="background-image:url("+arrImg[n]+");background-position:0px "+i*-100+"px;background-size:1000px 500px;";
            box_leftp[i].querySelector(".contrary").style.cssText="background-image:url("+arrImg[n+1]+");background-position:0px "+i*-100+"px;background-size:1000px 500px;";
            box_rightp[i].querySelector(".front").style.cssText="background-image:url("+arrImg[n]+");background-position:-500px "+i*-100+"px;background-size:1000px 500px;";
            box_rightp[i].querySelector(".contrary").style.cssText="background-image:url("+arrImg[n+1]+");background-position:-500px "+i*-100+"px;background-size:1000px 500px;";
        }
        //还原初始的角度
        for(var j=0;j<=4;j++){
            box_leftp[j].style.cssText="transform:rotateY("+reg[j]+"deg)";
            box_rightp[j].style.cssText="transform:rotateY("+-reg[j]+"deg)";
        }
        //图片的坐标加一
        n++;
        //当图片到最一张后就返回原来的位置
        if(n>=arrImg.length-1){
            n=0;
        }

        //设置过度的动画使其动画轮播改变图片
        var t=setInterval(function(){
            //这里设置每个板块开始旋转时间不同步。
            //以实现图片板块的不同的样子转过来。
            reg[0]-=18;
            if(reg[0]<=-180){
                reg[0]=-180
            }
            if(reg[0]<=-36){
                reg[1]-=18;
                if(reg[1]<=-180){
                    reg[1]=-180
                }
            }
            if(reg[1]<=-36){
                reg[2]-=18;
                if(reg[2]<=-180){
                    reg[2]=-180
                }
            }
            if(reg[2]<=-36){
                reg[3]-=18;
                if(reg[3]<=-180){
                    reg[3]=-180
                }
            }
            if(reg[3]<=-36){
                reg[4]-=18;
                if(reg[4]<=-180){
                    reg[4]=-180;
                    clearInterval(t)
                }
            }
            //角度旋转的动画。
            for(var l=0;l<=4;l++){
            box_leftp[l].style.cssText="transform:rotateY("+reg[l]+"deg)";
            box_rightp[l].style.cssText="transform:rotateY("+-reg[l]+"deg)";
            }
        },100)
    }
</script>