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 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
华润集团网上药店:健一网
2016/09/19 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
驻村工作先进事迹
2014/08/14 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
全陪导游词
2015/02/04 职场文书
重阳节活动主持词
2015/07/04 职场文书