javascript - 如何解决JQuery轮播图的动画和计数器不匹配问题?
大家讲道理
大家讲道理 2017-04-10 16:20:41
[JavaScript讨论组]

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

原理是设置一个index标记,根据当前index改变p的偏移位置
但是假设轮播图转换动画为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);
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(3)
PHPz
 1. if($(element).is(":animated")){    //判断元素是否正处于动画状态
//如果当前没有进行动画,则添加新动画
}
 2.var flag = true;
   在animate回调里调控flag。
ringa_lee

如果一次效果展示需要5s,那么5s内的其它效果切换操作应该视为无效。

var nowDate=0;
function next(){
    if(new Date().getIime()-nowDate<5000){
        return;
    }
    nowDate=new Date().getIime();
    //干事情咯
    do();
}
PHP中文网

你可以设置一个点击超时,用户点击一次后,不马上执行你动画,而是延迟一定时间例如100毫秒,如果在100毫秒后,用户没有进一步的点击行为,那么触发动画执行,如果有点击行为,那么取消上一次延时设置一个新的延时

这样就达到你的只接受一次事件的效果

var nextClickTimer;
function toNext(){
    t&&clearTimeout(t);
    t=setTimeout(function(){
       //执行动画正常流程
    },100);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号