图片远近切换小效果

//HTML布局
<div id="wrap">
    <img src="img/0.jpg" alt="0">
    <img src="img/1.jpg" alt="1">
    <img src="img/2.jpg" alt="2">
    <img src="img/3.jpg" alt="3">
    <img src="img/4.jpg" alt="4">
    <img src="img/5.jpg" alt="5">
    <img src="img/6.jpg" alt="6">
</div>

/*CSS样式*/
body{
    background: #eee;
}
#wrap{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 0;
    border-radius: 10px;
}
#wrap img{
    width: 300px;
    height: 200px;
    border: none;
    vertical-align: top;
    position: absolute;
    left:450px;
    top: 150px;
    transition: 1s;
    border-radius: 10px;
    z-index: 999;
    box-shadow: 0px 5px 20px #777;}

    var oDiv = document.getElementById(‘wrap‘);
    var aImgs = oDiv.getElementsByTagName(‘img‘);
    var now = 3;
    // 点击的目标点
    var target;
    //在中间传入一张图片        首先从中间传入一张图片，封装这个函数，取名 middle

    middle(now);
　　 // 查找切换图片时，中间图片的索引值与左右索引值得关系
    //  5 6 0   1   2 3 4
    //  6 0 1   2   3 4 5 
    //  0 1 2   3   4 5 6
    //  0 1 2   3   4 5 6                
    //  1 2 3   4   5 6 0     4+1+0 4+1+1 4+1+2
    //  2 3 4   5   6 0 1     5+1+0 5+1+1 5+1+2
    //  3 4 5   6   0 1 2     6+1+0 6+1+1 6+1+2
    function middle(n){
        for(var i=0;i<3;i++){
            var Left = n-1-i;
            if(Left<0){
                Left = Left + 7;
            }
            aImgs[Left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(220-i*100)+"px) rotateY(30deg)";
            var Right = n+1+i;
            if(Right>6){
                Right = Right - 7;
            }
            aImgs[Right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(220-i*100)+"px) rotateY(-30deg)";
        }
        aImgs[n].style.transform = "translateZ(300px)";
    }

    //切换上一张的函数
    function prev(){
        now --;
        if(now<0){
            now = 6;
        }
        middle(now);
        if(now == target){
            onoff = true;
            return;
        }
        setTimeout(function(){
            prev();
        },700)        
    }
    //切换下一张的函数
    function next(){
        now ++;
        if(now>6){
            now=0;
        }
        middle(now);
        if(now == target){
　　　　　　　//完成切换时打开开关
            onoff = true;
            return;
        }
        setTimeout(function(){
            next();
        },700)
    }

    // 定义开关解决多次点击错乱问题
    var onoff = true; 
    for(var i=0;i<aImgs.length;i++){
            aImgs[i].index = i;
            aImgs[i].onclick = function(ev){
            var ev = ev || event;
            target = this.index;
            //获取父级可视宽
            var oWidth = oDiv.clientWidth;  
            if(onoff && target!=now ){   //剔除中间值等于目标点的时候的点击事件
                onoff = false;
                //判断鼠标点击左右位置，来确定调用哪一个函数，点击左侧 prev()，点击右侧next()
                if(ev.clientX < oWidth/2){
                    prev();
                }else if(ev.clientX > oWidth/2){
                    next();
                }
            }
        }
    }