三十七、jQuery多動輪播動畫混疊效果
利用列舉物件封裝方法，通過引數傳遞建立不同的動畫模型並呼叫執行對應動畫；
主要是為了演示如何對動畫混疊進行封裝
一、搭建整體模型
1.封裝層級排序方法
//封裝層級排序方法
sortimg:function(){
$(".ulinfo li").each(function(index){
$(this).css({"zIndex":$(".ulinfo li").length-index-1});
})
}
2.封裝淡入淡出前後切換效果
原理：利用自定義動畫以及層級關係，當最高層的圖片淡出並將其層級設定為0，第二張圖片淡入；
fadeIn() fadeOut() 淡入淡出 引數(時間 回撥函式)
//封裝淡入淡出切換效果
bannerimg:function(){
$(".ulinfo li").each(function(){
//疊加zIndex
$(this).css("zIndex"
//判斷層級
if($(this).css("zIndex")==$(".ulinfo li").length){
$(this).fadeOut(1000,function(){
})
}else if($(this).css("zIndex")==$(".ulinfo li").length-1){
$(this).fadeIn(1000);
}
})
}
2.封裝動畫模型：動態建立dom元素，將整張圖片按照不同方式分割變換，並通過傳遞引數(圖片路徑)將其設定為背景圖片，每分割的每一部分通過背景圖片定位來控制，令每部分恰好拼成完整的圖片；
原理：對動畫模型方法傳參(圖片路徑,索引值)，根據所傳的引數，呼叫不同的動畫模型
注意：每個動畫模型根據所傳引數對應每個輪播動畫，2者都是利用switch (){case : break;} 語句封裝
//封裝動畫模型
domcreate:function(src,res){
switch (res){
case 1: //左右奇偶拉開
var tiao,width=600,height=300;
var tiao_height=20;
tiao=height/tiao_height;
for(var i=0;i<tiao;i++){
var ceng=$("<div></div>");
ceng.addClass("ceng");
ceng.css({
border:"1px solid red",
width:width+"px",
height:tiao_height+"px",
position:"absolute",
left:"0px",
top:(i*tiao_height)+"px",
zIndex:10,
backgroundImage:"url("+src+")",
backgroundSize:"600px 300px",
backgroundPosition:"0px "+ (-i*tiao_height)+"px"
});
$(".block").append(ceng);
}
break;
case 2: break;
case 3: break;
case 4: break;
}
},
3.封裝輪播動畫，同樣需要傳遞引數，控制動畫模型對應的輪播動畫，由輪播動畫對建立的動畫模型的每部分進行操作，將動畫與淡入淡出動畫相結合，形成不同的視覺假象；
利用switch(){case :break;} 封裝很多條不同的動畫效果
注意：在每一次動畫執行完成之後要移除動態建立的dom元素,不然不停建立dom元素會導致瀏覽器卡死
//封裝輪播動畫
shiftimg:function(res){
switch (res){
case 1:
$(".ceng").each(function(index){
if(index%2==0){
$(this).animate({
left:(-600)+"px"
},1000,"linear",function(){
$(this).remove();
})
}else{
$(this).animate({
left:(600)+"px"
},1000,"linear",function(){
$(this).remove();
})
}
});
break;
case 2:
break;
}
}
4.完善動畫封裝模型
由於這個動畫模型的輪播動畫都需藉助淡入淡出動畫完成，所以在淡入淡出動畫中呼叫動畫模型及輪播動畫方法，並通過Math.random()隨機數生成控制傳入引數進而控制輪播動畫隨機播放；
Math.ceil()向上取整
Math.floor()向下取整
//隨機數控制輪播動畫
var res=Math.ceil(Math.random()*2);//2對應的case 數
Animate.domcreate(src,res);
Animate.shiftimg(res);
二、完整程式碼：這裡以四個為例，當然還可以通過case新增更多個模型方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 600px;
height: 300px;
border: 1px solid black;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.ulinfo{
position: relative;
}
.ulinfo li{
list-style: none;
width: 600px;
height: 300px;
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.51);
}
img{
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script src="js/jquery-3.0.0.js"></script>
<script>
var time;
$(function(){
Animate.sortimg();
$(".ulinfo li").eq(0).show(); //預設第一張顯示
time=setInterval("Animate.bannerimg()",2000);
//進入離開事件
$(".block").mouseenter(function(){
clearInterval(time);
}).mouseleave(function(){
time=setInterval("Animate.bannerimg()",2000);
});
});
var Animate={
//封裝層級排序方法
sortimg:function(){
$(".ulinfo li").each(function(index){
$(this).css({"zIndex":$(".ulinfo li").length-index-1});
})
},
//封裝淡入淡出切換效果
bannerimg:function(){
var src=null;
$(".ulinfo li").each(function(){
//疊加zIndex
$(this).css("zIndex",parseInt($(this).css("zIndex"))+1);
//判斷層級
if($(this).css("zIndex")==$(".ulinfo li").length){
src=$(this).children("img").attr("src");
$(this).fadeOut(1000,function(){
$(this).css("zIndex",0);
})
}else if($(this).css("zIndex")==$(".ulinfo li").length-1){
$(this).fadeIn(1000);
}
});
//隨機數控制輪播動畫
var res=Math.ceil(Math.random()*4);
Animate.domcreate(src,res);
Animate.shiftimg(res);
},
//封裝動畫模型
domcreate:function(src,res){
switch (res){
case 1: //左右奇偶拉開
var tiao,width=600,height=300;
var tiao_height=20;
tiao=height/tiao_height;
for(var i=0;i<tiao;i++){
var ceng=$("<div></div>");
ceng.addClass("ceng");
ceng.css({
/*border:"1px solid red",*/
width:width+"px",
height:tiao_height+"px",
position:"absolute",
left:"0px",
top:(i*tiao_height)+"px",
zIndex:10,
backgroundImage:"url("+src+")",
backgroundSize:"600px 300px",
backgroundPosition:"0px "+ (-i*tiao_height)+"px"
});
$(".block").append(ceng);
}
break;
case 2: //百葉窗效果
var tiao,width=600,height=300;
var tiao_width=30;
tiao=width/tiao_width;
for(var i=0;i<tiao;i++){
var ceng=$("<div></div>");
ceng.addClass("ceng");
ceng.css({
/*border:"1px solid red",*/
width:tiao_width+"px",
height:height+"px",
position:"absolute",
top:"0px",
left:(i*tiao_width)+"px",
zIndex:10,
backgroundImage:"url("+src+")",
backgroundSize:"600px 300px",
backgroundPosition:(-i*tiao_width)+"px 0px"
});
$(".block").append(ceng);
}
break;
case 3:
var tiao,hang,width=600,height=300;
var tiao_width=60,tiao_height=60;
tiao=width/tiao_width;
hang=height/tiao_height;
for(var i=0;i<tiao*hang;i++){
var ceng=$("<div></div>");
ceng.addClass("ceng");
ceng.css({
border:"1px solid rgba(255, 255, 255, 0.5)",
width:tiao_width+"px",
height:tiao_height+"px",
position:"absolute",
top:(Math.floor(i/tiao)*tiao_height)+"px", //根據列確定行
left:(i%tiao*tiao_width)+"px",
zIndex:10,
backgroundImage:"url("+src+")",
backgroundSize:"600px 300px",
backgroundPosition:(-i%tiao*tiao_width)+"px "+(-Math.floor(i/tiao)*tiao_height)+"px"
});
$(".block").append(ceng);
}
break;
case 4:
var tiao,width=600,height=300;
var tiao_width=10;
tiao=width/tiao_width;
for(var i=0;i<tiao;i++){
var ceng=$("<div></div>");
ceng.addClass("ceng");
ceng.css({
border:"1px solid rgba(255, 255, 255, 0.5)",
width:tiao_width+"px",
height:height+"px",
position:"absolute",
top:"0px",
left:(i*tiao_width)+"px",
zIndex:10,
backgroundImage:"url("+src+")",
backgroundSize:"600px 300px",
backgroundPosition:(-i*tiao_width)+"px 0px"
});
$(".block").append(ceng);
}
break;
}
},
//封裝輪播動畫
shiftimg:function(res){
switch (res){
case 1:
$(".ceng").each(function(index){
if(index%2==0){
$(this).animate({
left:(-600)+"px"
},1000,"linear",function(){
$(this).remove();
})
}else{
$(this).animate({
left:(600)+"px"
},1000,"linear",function(){
$(this).remove();
})
}
});
break;
case 2://百葉窗效果
$(".ceng").each(function(){
//改變Left width值令每條向其中軸線收縮並消失
$(this).animate({
width:"0px",
left:parseInt($(this).css("left"))+parseInt($(this).css("width"))/2+"px"
},1000,"linear",function(){
$(this).remove();
})
});
break;
case 3:
$(".ceng").each(function(){
$(this).animate({
//改變top left opacity
top:(Math.sin(Math.random()*Math.PI*2)*300)+"px",
left:(Math.cos(Math.random()*Math.PI)*600)+"px",
opacity:"0"
},1000,"linear",function(){
$(this).remove();
})
});
break;
case 4:
$(".ceng").each(function(index){
$(this).animate({
//改變top height opacity
top:(Math.sin(index*60)*500)+"px",
height:(parseInt($(this).css("height"))-2*(Math.sin(index*60)*500))+"px",
opacity:"0"
},1000,"linear",function(){
$(this).remove();
})
});
break;
}
}
}
</script>
</head>
<body>
<div class="block">
<ul class="ulinfo">
<li><img src="image/demo1.jpg"></li>
<li><img src="image/demo2.jpg"></li>
<li><img src="image/demo3.jpg"></li>
<li><img src="image/demo4.jpg"></li>
<li><img src="image/demo5.jpg"></li>
<li><img src="image/demo6.jpg"></li>
</ul>
</div>
</body>
</html>