jquery图片自动滑动切换代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jquery图片自动滑动切换代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片自动滑动切换代码</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
body, img {/*去除不必要的东西 外边框 内边距什么的最讨厌了*/
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
.框架 {
	background-color:#CCC;
	border: #CCC 1px solid;
	width: 743px;
	height: 323px;
	margin: auto;
	margin-top: 40px;
	position: relative;/*启动相对定位 让子集元素能相对与 父级元素定位*/
	overflow: hidden;
}
.框架 .元素 {
	position: absolute;/*开启绝对定位  相对于父级元素定位*/
	left: 0;
	top: 0;
	width: 743px;
	height: 323px;
}
</style>
</head>

<body>
<div class="框架">
  <div class="元素" style="z-index: 5; top:310"> <img src="img/2014-07-29_470629.jpg" width="743" height="323"> </div>
  <div class="元素" style="z-index:4;"> <img src="img/2014-08-05_473813.jpg" width="743" height="323"> </div>
  <div class="元素" style="z-index:3;"> <img src="img/2014-08-06_474077.jpg" width="743" height="323"> </div>
  <div class="元素" style="z-index:2;"> <img src="img/2014-08-06_474101.jpg" width="743" height="323"> </div>
  <div class="元素" 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
加入移动对象($(".框架>.元素").eq(0),743,0,1000,'完成(0)')// JQ对象 ,X位置,Y位置,用时
function 完成(i){
	if(i==0){
		加入移动对象($(".框架>.元素").eq(1),0,323,2000,'完成(1)')
	}else if(i==1){
		加入移动对象($(".框架>.元素").eq(2),743,323,2000,'完成(2)')
	}else if(i==2){
		加入移动对象($(".框架>.元素").eq(3),743,-323,2000,'完成(3)')
	}else if(i==3){
		加入移动对象($(".框架>.元素").eq(4),-743,-323,2000,'完成(4)')
	}else if(i==4){
		加入移动对象($(".框架>.元素").eq(4),0,0,1000,'完成(5)')
	}else if(i==5){
		加入移动对象($(".框架>.元素").eq(3),0,0,1000,'完成(6)')
	}else if(i==6){
		加入移动对象($(".框架>.元素").eq(2),0,0,1000,'完成(7)')
	}else if(i==7){
		加入移动对象($(".框架>.元素").eq(1),0,0,1000,'完成(8)')
	}else if(i==8){
		加入移动对象($(".框架>.元素").eq(0),0,0,1000,'完成(9)')
	}else if(i==9){
		alert("亲:事情都干完啦！")
	}
	
}
function 加入移动对象(对象,X,Y,时间,函数){//JQ对象,移动到的位置X,移动到的位置Y,完成动画的总时间,完成后执行的函数
 var 元素={
	  "对象":对象,/*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(元素.对象.selector==移动对象组[i].对象.selector){存在=true;} // JQ 1.7.2 存在这个属性 $('body div').selector 大概等于 'body div' 使用要注意了
 }
 if(存在==false){//不存在加入对象
	 移动对象组[移动对象组.length]=元素;
 } 
}
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>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)