图片倾斜展示旋转轮播插件基于jQuery.transform插件

HTML代码很简洁
<div id="test">
<ul>
<li><img src="img/9.jpg"></li>
<li><img src="img/10.jpg"></li>
<li><img src="img/11.jpg"></li>
<li><img src="img/12.jpg" ></li>
</ul>
<div class="btngroup">

<span class="btnleft"><</span>
<span class="btnright">></span>
</div>
</div>
需要引用jQuery.transform插件
<script src="jquery.min.js"></script>
<script src="jquery.transform-0.9.3.min_.js"></script>
最后js调用
var loop=(function(){
	  
	   var $btnl=$(".btnleft"),
	   $btnr=$(".btnright"),
	   $list=$("#test ul li"),
	   origin=['125px','400px'],
	   origin1=['125px','700px'],
	   imgIndex=0,
	   animate=false;
	   
	var arrimg=creatimg([['img/9.jpg','img/10.jpg','img/11.jpg','img/12.jpg'],['img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg'],['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['img/13.jpg','img/14.jpg','img/15.jpg','img/16.jpg']]);
	 
	   function bibao(){
			   config();
			   setevent();
			  }
	function config(){	
			var chushi=-6,
			angel=6;
			$list.transform({origin:origin}); 
			$list.each(function(i){
				$(this).transform({rotate:chushi+(i*angel)+"deg"});
				//$(this).transform({rotate: '15deg'});	
				})
			} 
	function setevent(){
		/*var t=setTimout(function(){
			loop1();
			},1000)*/
			clearInterval(loop3);
			var loop3=setInterval(function(){
				loop1();
				},2500);
		$(".btnright").bind("click",function(){
			clearInterval(loop3);
			var t=setTimeout(function(){
					clearInterval(loop3);
					loop3=setInterval(function(){
					loop1();
					},3000);
					},1200);
			if(animate){
				//animate=false;
				return false;
				}		
				animate=true;
			loop1();
			});
			
			// if(!$new_img.is(":animated")){
				//clearInterval(t);
			
		// clearTimeout(t);
		 
          function loop1(){
		 //alert(1);
		  imgIndex+=1;
		  if(imgIndex>3){
			  imgIndex=0;
			  }
		 
		  $list.each(function(i){
			  var $this=$(this);
			  var $old_img=$this.children('img');
			//  alert(arrimg[imgIndex][i]);
			  var $new_img=$(arrimg[imgIndex][i]);
			  
			 //  alert(arrimg[imgIndex][i]);
			  $this.append($new_img); 
			  $old_img.transform({origin:origin1});
			$new_img.transform({origin:origin1,rotate:"-45deg"});  
			setTimeout(function(){  
			$old_img.animate({rotate:"45deg"});
			  $new_img.animate({rotate:"0deg"},500,function(){
				   $old_img.remove();
				   if(i*200==600){
					   setTimeout(function(){animate=false;},600); 
					   }
				  });},i*200)
			  })
				}
				//return loop1;
			$(".btnleft").bind("click", function(){
				//if($new_img.is(":animated")){return false;}
				clearInterval(loop3);
				var t=setTimeout(function(){
					animate=false;
					clearInterval(loop3);
					loop3=setInterval(function(){
					loop1();
					},3000);
					},1200);
			if(animate){
				 
				return false;
				}		
				animate=true;
				loop2();
				//return loop2();
				});
				function loop2(){
				imgIndex+=(-1);
				if(imgIndex<0){
					imgIndex=3;
					}
               $list.each(function(i){
				    
			  var $this=$(this);
			  var $old_img=$this.children('img');
			//  alert(arrimg[imgIndex][i]);
			  var $new_img=$(arrimg[imgIndex][i]);
			  
			 //  alert(arrimg[imgIndex][i]);
			  $this.append($new_img);  
			  $old_img.transform({origin:origin1});
			  $new_img.transform({origin:origin1,rotate:"45deg"});
			
				 
			  setTimeout(function(){$old_img.animate({rotate:"-45deg"});
			  $new_img.animate({rotate:"0deg"},500,function(){
				  $old_img.remove();
				  
				  });},(3-i)*200)
            });  }
		}
	function creatimg(arr){
		var img_handle=[];
		for(var i in arr){
			img_handle[i]=[];
			for(var j in arr[i]){
			img_handle[i][j]=new Image();
			img_handle[i][j].src=arr[i][j];	
				}
			}
		return img_handle;
		}		  
		   return bibao;
	   })();
loop();