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. image即时上传

    function preview_upload(input, img_div_id){ var img_id = img_div_id.replace("itempic_previewDiv ...

  2. URLScan安装及配置(转)

    安装 URLScan 要安装 URLScan,请访问下面的 Microsoft Developer Network (MSDN) 网站: http://msdn2.microsoft.com/en-u ...

  3. Android与JS混编(js调用android相机)

       参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...

  4. redis的备份和恢复

    Redis 数据备份与恢复 数据备份 语法 redis Save 命令基本语法如下: redis > SAVE 实例 redis > SAVE OK 该命令将在 redis 备份目录中创建 ...

  5. winPcap_2_编译环境*注意*

    使用WinPcap编程 创建一个使用 wpcap.dll 的应用程序 用 Microsoft Visual C++ 创建一个使用 wpcap.dll 的应用程序,需要按以下步骤: 在每一个使用了库的源 ...

  6. ubuntu中安装openssh-server失败(首先ubuntu不能远程root登录)

      ubuntu 安装openssh-server时,报依赖错误   解决方法: 更新软件 sudo apt-get update   如果报校验和不符错误:(此错误为部分网址被墙)如图 解决方法如下 ...

  7. Nutch+Hadoop集群搭建

    转载自:http://www.open-open.com/lib/view/open1328670771405.html 1.Apache Nutch    Apache Nutch是一个用于网络搜索 ...

  8. nodejs 保存 payload 发送过来的文件

    1:接受文件 http://stackoverflow.com/questions/24610996/how-to-get-uploaded-file-in-node-js-express-app-u ...

  9. [C入门 - 游戏编程系列] 贪吃蛇篇(二) - 食物定义

    游戏中的食物没有那么多复杂属性,特别是贪吃蛇游戏中,我把食物看待的很简单: 1. 它必须属于世界,才能出现在世界.不可能一个不属于世界的食物,出现在世界中:但是可能存在着一个食物,它属于世界,但是却没 ...

  10. Core Data入门-备用

    简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...