效果图:3D旋转+切割
//轮播图
//使用例子:
//1.在需要的位置放置一个元素,样式什么的自己给,不影响
<div id="lunbotu" style="width: 400px;height: 200px;">
<img src="images/01.jpg" alt="">
<img src="images/02.jpg" alt="">
<img src="images/03.jpg" alt="">
<img src="images/04.jpg" alt="">
</div>
<script>
//2.在js里新建一个我们的轮播图对象,并把步骤1中创建的元素对象作为参数传给我们的构造函数。
var lunbotuObj=document.getElementById("lunbotu");//轮播图元素
var lun=new LunBoTu(lunbotuObj,4);//指定轮播图元素并给定切割的块数
//3.初始化,这一步其实没什么必要,你可以把代码修改一下,让它在构造函数被调用的时候就执行
lun.initial();
//4.在我们的轮播图对象内我提供了一个turn()方法,用来控制轮播图的旋转,每次一张图
lun.turn(1);//轮播的方向,1和-1代表正反方向
//5.我在对象内提供了和轮播图相关的一些属性,比如:初始位置、速度、切割片数、相邻切片间的延迟。
(这个轮播图我已经设置了自锁,所以没必要在使用的时候再设一遍。)
</script>
function LunBoTu(ele,n,imgList){
this.box=ele;
this.stepT=0.5;
this.delayT=0.1;
this.originIndex=0;
this.rotateNum=0;
this.imgList=imgList||[];
this.canTurn=true;
this.sliceNum=n||5;
this.hasInit=false;
this.initial=function(){
this.hasInit=true;
//初始化当前图片
var index=this.originIndex;
var boxObj=this.box;
//切割块数
var sliceNum=this.sliceNum;
//获取高度
var boxHeight=parseInt(getStyle(boxObj,"height"));
//获取图片集
var imgArray=boxObj.getElementsByTagName("img");
var imgList=this.imgList;
if(imgList.length<=0){
for(var i=0;i<imgArray.length;i++){
imgList[i]=imgArray[i].src;
}
//清空容器
for(;imgArray.length>0;){
boxObj.removeChild(imgArray[0]);
}
}
//少于4个自动补齐
for(var i=imgList.length;i<4;i++){
imgList[i]="";
}
var imageNum=imgList.length;
//放置主容器
var ulObj=document.createElement("ul");
boxObj.insertBefore(ulObj,boxObj.firstChild);
//ul的css样式
ulObj.style.width=100+"%";
ulObj.style.height=100+"%";
ulObj.style.listStyle="none";
ulObj.style.display="flex";
ulObj.style.justifyContent="nowrap row";
ulObj.style.backgroundColor="gray";
ulObj.style.transformStyle="preserve-3d";
// ulObj.style.transform="rotate3d(1,1,0,30deg)";
//添加切割块
for(var i=0;i<sliceNum;i++){
var liObj=document.createElement("li");
ulObj.appendChild(liObj);
liObj.style.flex=1;
liObj.style.transformStyle="preserve-3d";
liObj.style.position="relative";
// liObj.style.backgroundPosition=-i*100+"% "+0+"px";
//为每一个块添加子项
for(var j=0;j<4;j++){
var spanObj=document.createElement("span");
liObj.appendChild(spanObj);
spanObj.style.width=100+"%";
spanObj.style.height=100+"%";
spanObj.style.position="absolute";
spanObj.style.backgroundSize=sliceNum*100+"% "+100+"%";
spanObj.style.backgroundPosition=-i*100+"% "+0+"px";
index=index%imageNum;
switch(j){
case 0:
spanObj.style.transform="translateZ("+boxHeight/2+"px)";
spanObj.style.backgroundImage="url("+imgList[index+j>=0?index+j:index+j+imageNum]+")";
break;
case 1:
spanObj.style.transform="translateY("+(-boxHeight/2)+"px) rotateX(90deg)";
spanObj.style.backgroundImage="url("+imgList[index+j>=0?index+j:index+j+imageNum]+")";
break;
case 2:
spanObj.style.transform="translateZ("+(-boxHeight/2)+"px) rotateX(180deg)";
spanObj.style.backgroundImage="url("+imgList[index+j>=0?index+j:index+j+imageNum]+")";
break;
//底部放最后的图片
case 3:
spanObj.style.transform="translateY("+boxHeight/2+"px) rotateX(270deg)";
spanObj.style.backgroundImage="url("+imgList[index-1>=0?index-1:index-1+imageNum]+")";
break;
}
}
}
}
function qiuYu(num1,num2) {
var result=num1%num2;
return result>=0?result:num2+result;
}
this.turn=function(direction){
if(this.hasInit==false){
return;
}
var lunObj=this.box.getElementsByTagName("ul")[0];
var childObj=lunObj.children;
var thisObj=this;
if(thisObj.canTurn){
thisObj.canTurn=false;
if(direction>0){
//背面图片变为下一张
for(var i=0;i<childObj.length;i++){
childObj[i].children[qiuYu(-thisObj.rotateNum+2,4)].style.backgroundImage="url("+thisObj.imgList[qiuYu(thisObj.originIndex-thisObj.rotateNum+2,thisObj.imgList.length)]+")";
}
thisObj.rotateNum--;
}else if(direction<0) {
//背面图片变为上一张
for(var i=0;i<childObj.length;i++){
childObj[i].children[qiuYu(-thisObj.rotateNum+2,4)].style.backgroundImage="url("+thisObj.imgList[qiuYu(thisObj.originIndex-thisObj.rotateNum-2,thisObj.imgList.length)]+")";
}
thisObj.rotateNum++;
}
for(var i=0;i<childObj.length;i++){
childObj[i].style.transitionDelay=thisObj.delayT*i+"s";
childObj[i].style.transitionDuration=thisObj.stepT+"s";
childObj[i].style.transform="rotateX("+thisObj.rotateNum*90+"deg)";
}
setTimeout(function(){
thisObj.canTurn=true;
console.log("ok");
},(thisObj.delayT*(thisObj.sliceNum-1)+thisObj.stepT)*1000);
}
}
//获取style标签内属性函数的封装
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];//IE浏览器
}else{
return getComputedStyle(ele, false)[attr];//火狐浏览器
}
}
}