JQuery.transform 旋转焦点图 Js篇

基于对慕课网教程的笔记

js方法框架

使用闭包的写法

将自己的方法封装 避免自己函数中的变量 与其他人写的变量重复

//立即执行函数
var loopPlayerInit=(function(){
	
		
	function init(){
		
		
		configer();
		setevent();
	}
	
	function configer(){
		
	}
	
	function setevent(){
	    
	}
	
	function createImg(arr){  
		
	    return imgArr;	
	}
	
	function anigo(d){
		
		}
	
	return init;
	
	
})();
loopPlayerInit();

公共变量

var $butLeft=null,
	    $butRight=null;
	var origin=['125px','600px'];//设置的中心点
	var imgorigin=['125px','800px'];//动画的中心点
	var imhAll=createImg[['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'],['image/5.jpg','image/6.jpg','image/7.jpg','image/8.jpg'],['image/9.jpg','image/10.jpg','image/11.jpg','image/12.jpg']];
	var imgarrIndex=0; //记录当前显示为第几组图片
	var imgAng=45; //新加入图片的角度
	var imgTime=300; //延时时间
	var rotaing=false;

function init(){
		$butLeft=$(".butleft"),
		$butright=$(".rightbut"),
		$imglist=$(".mainbox ul li");
		
		configer();//初始化函数
		setevent();//绑定时间函数
	}

configer初始化函数

初始化图片的状态 使其有一定角度（每个图片有不同的选装角度）

function configer(){
		var ang=5;//变化角度
		var aint=-5;//初始角度
		$imglist.transform({origin:origin});//通过角度值 中心点旋转
		//遍历所有的图片
		//i是遍历图片的初始值 从零开始
	    $imglist.each(function(i){
			var $this=$(this);
			$this.transform({rotate:aint+(i*ang)+"deg"});//初始角度+i*变化角度+单位 就可以使图片 不同角度变化
		})
	}

绑定事件函数--绑定 anigo 动画函数

该处使用return false 则只能使用bind绑定

function setevent(){
	     $butleft.bind("click",function(){
			   anigo(-1);
			 return false;//使a标签点击不跳转 防止不出现效果
		 });
			 
		 $butleft.bind("click",function(){
			  anigo(1);
			 return false;//使a标签点击不跳转 防止不出现效果
		 });	
	}

createImg 图片处理函数--将二维图片数组中的图片地址处理成图片  放到内存中

function createImg(arr){  //将二维图片数组中的图片地址处理成图片  放到内存中
		imgArr=[];
		for(var i in arr){ //专门用于处理数组的遍历
			imgArr[i]=[];
			for(var x in arr[i]){
			   imgArr[i][x]=new image();
			   imgArr[i][x].src=arr[i][x];	
			}
		}
	    return imgArr;	
	}

anigo 动画函数 

function anigo(d){
		//防止连点出现错误
		if(rotaing) return false;
		rotaing=true;
		
		imgArrIndex+=d;
		if(imgArrIndex>imgAll.length-1){
			imgArrIndex=0;
		}else if(imgArrIndex<0){
			imgArrIndex=imgAll.length-1;
		}
		$imglist.eash(function(i){
		     var $thisItme=$(this);
			 var $thisimg=$thisItme.children("img");
			 var $targetImg=$(imgAll[imgArrIndex][i]);//找到对应的图片组
			 var thisTime=(d===1)?imgTime*i:imgTime*(imglist.length-1-i);//是动画间隔显示的延时时间 0 300 600 900 
			 
			 $thisItem.append($targetImg);	//将图片加入到容器中
			 $thisimg.transform({origin:imgorigin});
			 $targetImg.transform({origin:imgorigin,rotate:(0-d)*imgAng+"deg"});//新加入图片初始角度
			 setTimeout(function(){
				 $thisimg.animate({rotate:imgAng*d+"deg"});//当前图片旋转
			     $targetImg.animate({rotate:"0deg"},500,function(){
					 $thisimg.remove();
					 //当时间为900 即最后一张图片完成动画 即复位rotating
					 if(thisTime==(($imglist.length-1)*imgTime)){
						 rotaing=false;
						 }
					 });//新加入图片旋转 延时 将移除的图片删掉 保证容器内只有一张图片
				 },thisTime);
			
		})

总结

1.将存在的图片旋转消失（只是将图片移动到看不见的地方），新进的图片旋转出现（设置初始的角度和中心点）。

2.将移走的图片从容器中彻底移除 $thisimg.remove();

3.使动画依次进行 var thisTime=(d===1)?imgTime*i:imgTime*(imglist.length-1-i);//是动画间隔显示的延时时间 0 300 600 900

               setTimeout(function(){},thisTime);
4.防止连点出现错  if(rotaing) return false;
                rotaing=true;

                然后在定时器中

                //当时间为900 即最后一张图片完成动画 即复位rotating
                if(thisTime==(($imglist.length-1)*imgTime)){
                       rotaing=false;
                }