function nextSlider(){
//使用b作为开关,只有动画完成后才能进行下一次运动
if(b){
//如果b为真,则马上设置b为false,如果startmove的回调没有重新设置b的值,则不能继续进行下一次轮播运动;
b = false;
index++;
startMove( oUl,{ left : -liWidth * index},function(){ if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left= -liWidth + 'px';
index = 1;
}
b = true;
})
return
}
};

以前经常遇到原生javascript动画混乱,这次利用开关判断运动是否完成

javascript 阻止多次点击造成的轮播混乱的更多相关文章

  1. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  2. 纯css就能实现可点击切换的轮播图,feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

  3. 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  4. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  5. 原生JavaScript(js)手把手教你写轮播图插件(banner)

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  6. javaScript实现图片滚动及一个普通图片轮播的代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. html+css+javascript实现简易轮播图片

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...

  8. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

  9. javascript无缝流畅动画轮播,终于让我给搞出来了。

    自己一直想写一个真正能用的轮播图,以前是写过一个,但是不是无缝的轮播,感觉体验很差,这个轮播之前也搞了很多实例,看了很多代码,但是脑子总转不过弯,为什么在运动到一定距离后可以突然转回到原始位置,而没有 ...

随机推荐

  1. Asp.Net Mvc5新特性

    One ASP.NET:统一平台 BootStrap:免费Css响应式页面 路由标记属性:简单,控制器,操作,前缀,参数,URL ASP.NET WEB API 2:路由标记属性,Oauth2.0,O ...

  2. sqlserver2005重新安装(安装汇编错误,安装程序无法连接到数据库服务进行服务配置)

    2014-01-09 16:41 1687人阅读 评论(1) 收藏 举报 分类: 数据库(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. sqlserver2005重新安装(安装汇编错误, ...

  3. SimpleDateFormat的部分方法

    1,语法格式:new SimpleDateFormat("yyyy-MM-dd HH:mm") parse:String-->Date format:Date-->St ...

  4. CODEVS 1062 路由选择

    1062 路由选择  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 在网络通信中,经常需要求最短路径.但完全用最短路径传 ...

  5. UWP开发小记

    针对个人的上一篇文章中提到的遇到的几个问题,做一下个人解答 DLL部署的问题,可以将DLL添加到工程中,属性中设置content为true,这样,部署目录下就会有这个文件. 需要说明的是,这个文件确实 ...

  6. show_space/get_alert_log/get_trace_file

    1.get_alert_log 获取alert文件的路径和名称 set serveroutput on        --设置输出,让sqlplus在屏幕上可以输出.(要加入到login.sql中!) ...

  7. redis的特色

    总结一下redis的特点: 1.独特的键值对模型 很多数据库只能处理一种数据结构:     • SQL 数据库 —— 表格     • Memcached —— 键值对数据库,键和值都是字符串     ...

  8. 为Mac自带的Apache配置PHP和虚拟机

    操作系统:os x 10.11.2 1.启动apache 打开终端(terminal),输入命令:sudo apachectl -k start ; 在浏览器地址栏中输入:http://localho ...

  9. 命运(HDU 2571 简单动态规划)

    命运 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. NPAPI开发常识

    其实,就在几天前,我根本不知道什么是NPAPI插件.因为最近的项目中用到需要在非IE下检测客户端是否安装,最终找到浏览器插件NPAPI. 以下资料来源于网络收集,以此给那些和我一样迷茫的人.本文的目的 ...