jQuery不同风格图片排列轮播切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery不同风格图片排列轮播切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery不同风格图片排列轮播切换</title>
<style>
*{
	padding:0;
	margin:0;
	font-family:'微软雅黑';
	}
#test{
	width:1000px;
	height:350px;
	margin:0 auto;
	top:30px;
	position:relative;
	overflow:hidden;
	}
#test ul li{
	list-style:none;
	float:left;
	border:#FFF solid 20px;
	margin-left:-40px;
	overflow:hidden;
	
	width:250px;
	height:350px;
	position:relative;
	}
#test ul li img{
	position:absolute;}	
.btnleft{
	position:absolute;
	left:10px;
	top:155px;
	font-size:50px;
	color:#FFF;
	opacity:0.5;
	}
.btnright{
	position:absolute;
	right:35px;
	top:155px;
	font-size:50px;
	color:#FFF;
	opacity:0.5;
	}
.btngroup span:hover{
	opacity:1;
	cursor:pointer;
	}					
</style>
</head>

<body>
<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">&lt;</span>
<span class="btnright">&gt;</span>
</div>
</div>
<!------------------------>
<script src="jquery.min.js"></script>
<script src="jquery.transform-0.9.3.min_.js"></script>
<script>
$(document).ready(function(e) {
   // $("#test").animate({rotate:"45deg"});

   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(); 

});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)