轮播图（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><img src="./image/1.jpg"></li>
		<li><img src="./image/2.jpg"></li>
		<li><img src="./image/3.jpg"></li>
		<li><img src="./image/4.jpg"></li>
		<li><img src="./image/5.jpg"></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、在线演示

在线演示