jquery视窗图片自动轮播切换特效代码下载


jquery视窗图片自动轮播切换特效代码下载
jquery视窗图片自动轮播切换特效代码下载以及视窗图片、自动轮播切换等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="focus">
  <div class="pic" style="z-index:5;top:310"> <img src="img/2014-07-29_470629.jpg" width="743" height="323"> </div>
  <div class="pic" style="z-index:4;"> <img src="img/2014-08-05_473813.jpg" width="743" height="323"> </div>
  <div class="pic" style="z-index:3;"> <img src="img/2014-08-06_474077.jpg" width="743" height="323"> </div>
  <div class="pic" style="z-index:2;"> <img src="img/2014-08-06_474101.jpg" width="743" height="323"> </div>
  <div class="pic" style="z-index:1;"> <img src="img/2014-08-08_474863.jpg" width="743" height="323"> </div>
</div>
<script type="text/javascript">
//创建移动数组后 启动引擎
var 移动对象组=new Array();
//启动引擎  FPS 刷新率  刷新率越高一般看起来越流畅 但是也要看电脑的性能!一般游戏是60FPS 射击类游戏 120FPS以上
移动引擎(10,'移动引擎()')//5=200FPS 6=166FPS 7=142FPS 8=125FPS 9=111FPS 10=100FPS
加入移动对象($(".focus>.pic").eq(0),743,0,1000,'完成(0)')// JQ对象 ,X位置,Y位置,用时
function 完成(i){
	if(i==0){
		加入移动对象($(".focus>.pic").eq(1),0,323,2000,'完成(1)')
	}else if(i==1){
		加入移动对象($(".focus>.pic").eq(2),743,323,2000,'完成(2)')
	}else if(i==2){
		加入移动对象($(".focus>.pic").eq(3),743,-323,2000,'完成(3)')
	}else if(i==3){
		加入移动对象($(".focus>.pic").eq(4),-743,-323,2000,'完成(4)')
	}else if(i==4){
		加入移动对象($(".focus>.pic").eq(4),0,0,1000,'完成(5)')
	}else if(i==5){
		加入移动对象($(".focus>.pic").eq(3),0,0,1000,'完成(6)')
	}else if(i==6){
		加入移动对象($(".focus>.pic").eq(2),0,0,1000,'完成(7)')
	}else if(i==7){
		加入移动对象($(".focus>.pic").eq(1),0,0,1000,'完成(8)')
	}else if(i==8){
		加入移动对象($(".focus>.pic").eq(0),0,0,1000,'完成(9)')
	}else if(i==9){
		alert("亲:事情都干完啦!")
	}
}
function 加入移动对象(对象,X,Y,时间,函数){//JQ对象,移动到的位置X,移动到的位置Y,完成动画的总时间,完成后执行的函数
 var pic={
	  "对象":对象,/*JQ选择的对象 必须*/
	  "X":X,/*移动到的位置X 必须*/
	  "Y":Y,/*移动到的位置Y 必须*/
	  "X1":parseInt($(对象).css("left"),10),/*对象的起初位置X 自取*/
	  "Y1":parseInt($(对象).css("top"),10),/*对象的起初位置Y  自取*/
	  "进度":0,/*相对时间内的进度  引擎自己计算*/
	  "时间":时间,/*用多久时间去完成 的总时间 必须*/
	  "总进度":0,/*计算时间 的总进度 引擎自己计算 */
	  "完成":函数/*完成后 执行的函数  可以有*/
	 };
 var 存在=false;
 for (var i=0; i<移动对象组.length;i++){
   if(pic.对象.selector==移动对象组[i].对象.selector){存在=true;} // JQ 1.7.2 存在这个属性 $('body div').selector 大概等于 'body div' 使用要注意了
 }
 if(存在==false){//不存在加入对象
	 移动对象组[移动对象组.length]=pic;
 } 
}
function 移动引擎(时间){	//用时钟自启动的引擎  引擎就是无限循环  提供动力的那总
 for(var i=0;i<移动对象组.length;i++){//循环开始
  if(移动对象组[i].总进度==0){//用时间计算出总的进度  进度与时间相关
	  移动对象组[i].总进度=Math.ceil(移动对象组[i].时间/时间);
  }
  if(移动对象组[i].进度==移动对象组[i].总进度){
	移动对象组[i].对象.css("left", 移动对象组[i].X);//位置最后调整
	移动对象组[i].对象.css("top", 移动对象组[i].Y);//位置最后调整
	var str=移动对象组[i].完成;
	移动对象组.splice(i,1)//删除对象
	eval(str)//执行回调函数
  }else{
	进度=移动对象组[i].进度/移动对象组[i].总进度*90;
	if(移动对象组[i].X>移动对象组[i].X1){//横向 向右移动
	 if(移动对象组[i].X1<=0){
		 移动宽度=移动对象组[i].X+Math.abs(移动对象组[i].X1);//真实移动宽度
	 }
	 else{
		 移动宽度=Math.abs(Math.abs(移动对象组[i].X1)-移动对象组[i].X);//真实移动宽度
	 }
	 //计算出移动宽度
	 位置=Math.sin(进度*(2*Math.PI/360))*(移动宽度)
	 移动对象组[i].对象.css("left",位置+移动对象组[i].X1); 
	}
	else{//横向 向左移动
	 移动宽度=Math.abs(移动对象组[i].X-Math.abs(移动对象组[i].X1));//计算出移动距离
	 位置=Math.sin(进度*(2*Math.PI/360))*(移动宽度)
	 移动对象组[i].对象.css("left",移动对象组[i].X1-位置); 
	}
	if(移动对象组[i].Y>移动对象组[i].Y1){//纵向 向下移动
	 if(移动对象组[i].Y1<=0){
	   移动宽度=移动对象组[i].Y+Math.abs(移动对象组[i].Y1);//真实移动宽度
	 }
	 else{
		 移动宽度=Math.abs(Math.abs(移动对象组[i].Y1)-移动对象组[i].Y);//真实移动宽度
	 }
	 //计算出移动宽度
	 位置=Math.sin(进度*(2*Math.PI/360))*(移动宽度)
	 移动对象组[i].对象.css("top",位置+移动对象组[i].Y1); 
	}
	else{//横向 向左移动
	 移动宽度=Math.abs(移动对象组[i].Y-Math.abs(移动对象组[i].Y1));//计算出移动距离
	 位置=Math.sin(进度*(2*Math.PI/360))*(移动宽度)
	 移动对象组[i].对象.css("top",移动对象组[i].Y1-位置); 
	}	
	移动对象组[i].进度=移动对象组[i].进度+1;
  } 
 }//循环结束
setTimeout('移动引擎('+时间+')',时间)//自己启动自己//最后执行
}
</script>

相关推荐

发表评论

相关文章