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. HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。

    异常信息: 解决方案:        检查一下ASP.NET有没有安装: 控制面板>程序和功能>打开或关闭Windows功能 > Internet信息服务 > 万维网服务 &g ...

  2. (转)sql中 in 、not in 、exists、not exists 用法和差别

    exists (sql 返回结果集为真)  not exists (sql 不返回结果集为真)  如下:  表A  ID NAME  1    A1  2    A2  3  A3 表B  ID AI ...

  3. C# viewstate

    Viewstate 处理不是form中可以传值的标签 进行传值.可以禁用元素的viewstate 也可以禁用页面的Enableviewstate=”false”;(在配置区域写)内网系统,互联网后台可 ...

  4. 数据泵导出/导入Expdp/impdp

    一下转自 http://blog.csdn.net/jionjionyoushen/article/details/6789686 数据泵导出/导入Expdp/impdp Oracle 10g引入了D ...

  5. wcf wpf

    转 http://blog.csdn.net/thunder09/article/details/5792157 WPF就是所谓下一代Windows界面层技术,我觉得还有满有前途的.不过Vista发布 ...

  6. PHP 日期格式化 参数参考

    a - "am" 或是 "pm" A - "AM" 或是 "PM" d - 几日,二位数字,若不足二位则前面补零; 如: ...

  7. 洛谷 P3383 【模板】线性筛素数

    P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...

  8. Go学习笔记(二):编写 HelloWorld 程序

    //Hello.go代码 package main import "fmt" func main(){ fmt.Printf("Hello, world!This is ...

  9. 从运行原理及使用场景看Apache和Nginx

    用正确的工具,做正确的事情. 本文只作为了解Apache和Nginx知识的一个梳理,想详细了解的请阅读文末参考链接中的博文. Web服务器 Web服务器也称为WWW(WORLD WIDE WEB)服务 ...

  10. R语言的数据结构

    首先声明,R语言对大小写敏感. 一.向量 vector类型可以存储数字.字符和逻辑类型.构建函数为C(): > a <- c(1,2,3,4) > b <- c('dau',' ...