轮播图（4）——基于JQ的3D轮播设计与实现

前面已经有三个类型的轮播，已经足够使用，现在介绍一个相对较为炫酷的3D旋转轮播图。3D轮播就原理来说，特别简单，天色不早了，开始造轮子

1、思路

1.1 css样式布局

介绍一下上图的布局思路

上图所示，容器里面有五个小容器，五个小容器一定要是绝对定位，用top和left值来逐个定位，顺序就是上图的标号从一到五（按照自己的需要修改容器个数，这里用五个图举例），当然一定要记得父级元素相对定位，“子绝父相”哪里都需要。

1.2 js的大致思路

自动循环轮播的图片，当前图片向左滑动，下一张图片就紧接着向左滑动进入可视区域banner，以此类推，用全局索引实现循环来回播放，当然需要借助animate()方法和css()方法。
大致流程如下：
这里要用到一个相对高端的东西，JSON。其实也没那么玄乎，无非就是一个多个对象组成的数组，把上面每个盛放图片的容器的每个css属性逐个都放在对象里面，再把对象放在一个数组里面，json数组好了。然后就是利用原生js内数组对象内置函数的使用，什么arr.push(),arr.shift(),arr.unshift(),arr.pop():

    pop()   删除并返回数组的最后一个元素
    push()  向数组的末尾添加一个或更多元素，并返回新的长度。
    shift() 删除并返回数组的第一个元素
    unshift()   向数组的开头添加一个或更多元素，并返回新的长度。

点击下一张按钮一次，就将第一个对象追加到数组之后
点击上一张按钮一次，就将最后一个对象添加到数组之前
这样每次点击完就会将数组重新生成，数组的每个对象数组就得重新往每个盛放图片的容器上遍历一次，利用animate()方法，就呈现出动态效果。

2、开搞

2.1 html代码

    <div class="wrap" id="wrap">
        <ul>
            <li>[站外图片上传中……(2)]</li>
            <li>[站外图片上传中……(3)]</li>
            <li>[站外图片上传中……(4)]</li>
            <li>[站外图片上传中……(5)]</li>
            <li>[站外图片上传中……(6)]</li>
        </ul>
        <span class="ctrl">
            <button class="prev"><</button>
            <button class="next">></button>
        </span>
    </div>

2.2 css代码

    *{padding:0;margin:0;list-style:none;}
        .wrap{
            width:1100px;
            height:500px;
            margin:0 auto;
            background-color:#ccc;
            position:relative;
        }
        .wrap ul{
            position:relative;
        }
        .wrap ul li{
            position: absolute;
            top:0;
            left:0;
        }
        .wrap ul li img{
            width:100%;
        }
        .ctrl{
            display:block;
            width:100%;
            position:absolute;
            z-index:99;
            top:300px;
        }
        .ctrl button{
            width:30px;
            height:50px;
        }   
        .prev{
            float:left;
            margin-left:30px;
        }
        .next{
            float:right;
            margin-right:30px;
        }

2.3 js代码

$(function(){
            var json=[
                {//图1
                    top:'0px',
                    left:'200px',
                    width:'300px',
                    height:'187px',
                    zIndex:6,
                    opacity:0.2
                },
                {//图2
                    top:'88px',
                    left:'75px',
                    width:'400px',
                    height:'250px',
                    zIndex:8,
                    opacity:0.8
                },
                {//图3
                    top:'188px',
                    left:'300px',
                    width:'500px',
                    height:'312px',
                    zIndex:10,
                    opacity:1
                },
                {//图4
                    top:'88px',
                    left:'625px',
                    width:'400px',
                    height:'250px',
                    zIndex:8,
                    opacity:0.8
                },
                {//图5
                    top:'0px',
                    left:'600px',
                    width:'300px',
                    height:'187px',
                    zIndex:6,
                    opacity:0.2
                }
            ];
            var jieliu=true;
//          封装一个函数，将json每个数据通过遍历加在每个'li'容器上
            function addCss(){
                for(var i in json){
                    $('#wrap ul li').eq(i).css({zIndex:json[i].zIndex});
                    $('#wrap ul li').eq(i).animate({
                        top:json[i].top,
                        left:json[i].left,
                        width:json[i].width,
                        height:json[i].height,
                        opacity:json[i].opacity
                    },'slow',function(){
                        jieliu=true;
                    });
                }               
            }
            //页面打开先调用一次，页面不会乱
            addCss();
            $('.prev').click(function(){
                if(jieliu==true){
                    jieliu=false;
                    //json.shift(),删除数组的第一个值，并返回第一个值
                    //json.push(json.shift())将返回的第一个值追加到数组末尾
                    json.push(json.shift());
                    //重新遍历
                    addCss();                   
                }

            });
            $('.next').click(function(){
                if(jieliu==true){
                    jieliu=false;
                    //json.pop(),删除数组的最后个值，并返回最后一个值
                    //json.unshift(json.pop())将返回的最后一个值添加到数组最前面
                    json.unshift(json.pop());
                    //重新遍历
                    addCss();
                }
            });

        });

3、注意

记得要引入jq，否则无法运行；
防止按钮连续点击的优化前面的轮播都有提到，不做阐述。

4、在线演示

在线演示