您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片代码 >

    jquery制作的图片自动滑动切换代码

    时间:2014-08-26 08:56 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    效果预览 进入下载地址列表

    jquery制作的图片自动滑动切换代码jquery图片自动滑动切换代码是一款jQuery滑动引擎幻灯片代码。jquery滑动切换自动切换轮播切换 所属专题:幻灯片代码

    <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>

    jquery制作的图片自动滑动切换代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/tupian/10128.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!