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. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  2. asp.net实现将网页存为mht格式文件,类似于网页另存为mht功能

    MHT 首先说一下什么是mht格式文件,MHT叫“web单一文件”,就是把网页中包含的图片,CSS文件以及HTML文件全部放到一个MHT文件里面,而且浏览器可以直接读取显示.可以通过ie浏览器将一个网 ...

  3. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  4. IIS 7管理API——Microsoft.Web.Administration介绍

    原文:http://www.cnblogs.com/dflying/archive/2006/04/17/377276.html 本文翻译整理自Carlos Aguilar Mares的blog文章: ...

  5. java socket报文通信(二)报文的封装

    昨天我们谈了怎么建立socket通信的服务端和客户端,今天我们就来谈一谈怎么封装报文. 什么是报文这里我就不在阐述了,不清楚的朋友可以自己去查资料.我们今天要谈的报文主要友以下几个部分组成: 3位同步 ...

  6. ORACLE触发器概述之【语句触发器】【weber出品】

    一.触发器概述 与表,视图,模式,或者数据库相关的PL/SQL过程,当触发条件被触发时,自动执行 分类: 1.语句触发器 2.行触发器 二.语句触发器 1. 什么是语句触发器 语句触发器,是指当执行D ...

  7. 大家来找茬-SpringMVC中Tomcat正常启动,始终访问不了Controller,出404错

    创建了一个空的SpringMVC项目,Tomcat可以正常启动,但是运行的时候,始终进不了Controller,并且报404错误. 百度各种查,结果也是查不到原因.各个群里面各种求,各种贴源码,也没有 ...

  8. C语言中的memset函数和数组指针

    代码: #include <iostream> #include <cstring> using namespace std; int main(){ ] = {}; mems ...

  9. push方法的页面间跳转--

    一,自定义动画写push方法-- 添加coreGraphics.framework框架 在CATransitionAnimation.h文件里面引入-- #import <QuartzCore/ ...

  10. ORA-942 SP2-0611

    环境:oracle 11.2.04 问题描述: 在使用hr用户启用set autot trace时报错 set">HR@test>set autot trace; Error O ...