效果圖：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];//火狐瀏覽器
       	}
    }			
}