如何解决JQuery轮播图的动画和计数器不匹配问题?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何解决JQuery轮播图的动画和计数器不匹配问题?

2016-05-27 10:24:58 2044 1

自己用JQuery写了一个海报轮播图特效,核心代码如下:
(注:共七张轮播图,首尾衔接一张,其余五张为有效图。index取值为-1~5。其中0~4为有效图)

原理是设置一个index标记,根据当前index改变div的偏移位置
但是假设轮播图转换动画为5s,则在5s内快速点击“下一页”四次,则动画共耗时20s,图片去到第四张
如何设置在5s内快速点击“下一页”四次,但只耗时5s,图片去到第二张?即,动画未完成则只接受一次事件

 //================上一页
        function toPrev(){
            index--;
            if(index==-1){
                index=4;
                index_point.eq(index).addClass("on").siblings().removeClass();
                list.animate({left:"0"},1000,function(){list.css("left","-500%")});
                return 0;
            }
            index_point.eq(index).addClass("on").siblings().removeClass();
            location = index_point.eq(index).attr("index")*(-100)+"%";
            list.animate({left:location},1000);
            console.log(index +" "+ list.css("left"));
        }
        //================下一页
        function toNext(){
            index++;
            if(index==5){
                index=0;
                index_point.eq(index).addClass("on").siblings().removeClass();
                list.animate({left:"-600%"},1000,function(){list.css("left","-100%")});
                return 0;
            }
            index_point.eq(index).addClass("on").siblings().removeClass();
            location = index_point.eq(index).attr("index")*(-100)+"%";
            list.animate({left:location},1000);
            console.log(index +" "+ list.css("left"));
        }

        //===============点击小箭头翻页
        prev.bind("click",toPrev);
        next.bind("click",toNext);
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:17:12
     1. if($(element).is(":animated")){    //判断元素是否正处于动画状态
    //如果当前没有进行动画,则添加新动画
    }
     2.var flag = true;
    0 0
相关问答

1

回答

jquery中有没有实现 加载中.... 这样的动画?

2016-07-07 09:43:59 1492浏览量 回答数 1

1

回答

jquery中的ajax的请求出现问题

2016-07-14 16:58:18 2058浏览量 回答数 1

1

回答

jquery mobile ajax 请求,弹出提示框

2016-07-05 17:07:35 1928浏览量 回答数 1

1

回答

寻找jQuery中ajax方法的重载或别名的解决方法

2016-07-05 09:58:28 1750浏览量 回答数 1

1

回答

关于Jquery ui tabs插件的ajax调用

2016-07-05 10:18:48 2058浏览量 回答数 1

1

回答

jquery ajax json前台解析失败

2016-07-04 18:39:14 1811浏览量 回答数 1

1

回答

Jquery ajax json 不执行success的原因

2016-06-23 11:29:58 1928浏览量 回答数 1

1

回答

求一份浏览器中html css javascript jquery ajax的渲染顺序与原理!!

2016-06-16 16:59:29 2354浏览量 回答数 1

1

回答

jquery ajax不能上传图片

2016-06-14 13:20:15 2147浏览量 回答数 1

1

回答

关于基于jquery的ajax数据传输的问题

2016-06-06 15:08:20 1648浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载