轮播图（4）——基于JQ的3D轮播设计与实现
2016-11-26 本文已影响571人
铅笔芯的Ta
前面已经有三个类型的轮播，已经足够使用，现在介绍一个相对较为炫酷的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，否则无法运行；
防止按钮连续点击的优化前面的轮播都有提到，不做阐述。
