js 自动播放的实例代码


Posted in Javascript onNovember 19, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>auto play</title> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> 
<script type="text/javascript"> 
    //数组的第一项为时长,其他项可自定义 
    data = [["3","a"],["2","b"],["3","c"],["2","d"],["1",""]];     $(document).ready(function(){ 
        //设置触发事件 
        autoPlay.run = function(obj,num){ 
            back(obj,num); 
        }; 
        autoPlay(); 
    }); 
    function back(obj,num){ 
        $("#div_show").html(obj[num][1]); 
    } 
    function autoPlay(){ 
        //初始化计数参数 
        if(autoPlay.num ==undefined) 
            autoPlay.num = 0; 
        //初始化时间点 
        if(autoPlay.timepoint ==undefined) 
            autoPlay.timepoint = new Date().getTime(); 
        if(autoPlay.num<data.length){ 
            //函数句柄,data 数组,autoPlay.num当前下标 
            autoPlay.run(data,autoPlay.num); 
            //按照元素时间长度播放数组 
            if(new Date().getTime()>autoPlay.timepoint){ 
                //判断是否为第一次执行 
                if(autoPlay.first==undefined) 
                    autoPlay.first = true; 
                else 
                    autoPlay.num++; 
                //设置下一次播放的时间点 
                autoPlay.timepoint += (data[autoPlay.num][0]*1000); 
            } 
            setTimeout("autoPlay()",500); 
        } 
    } 
    $.extend({autoPlay:function(){ 
        var defaults = {inteval:500}; 
    }}); 
</script> 
</head> 
<body> 
<div id="div_show"></div> 
</body> 
</html>

定义播放时间,可以定义事件
Javascript 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
vue环境搭建简单教程
Nov 07 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 #Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 #Javascript
详解jQuery插件开发中的extend方法
Nov 19 #Javascript
Js 导出table内容到Excel的简单实例
Nov 19 #Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 #Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
用javascript实现画板的代码
2007/09/05 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python日志模块logging简介
2015/04/13 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python实现ip地址的包含关系判断
2020/02/07 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
新店开张活动方案
2014/08/24 职场文书
护士个人总结范文
2015/02/13 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python