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 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
解决vue-loader加载不上的问题
Oct 21 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
收音机的保养
2021/03/01 无线电
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php导出excel格式数据问题
2014/03/11 PHP
php缓冲输出实例分析
2015/01/05 PHP
yii2安装详细流程
2018/05/23 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
JavaScript延迟加载
2021/03/09 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
详解JavaScript中的强制类型转换
2019/04/15 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python 中的int()函数怎么用
2017/10/17 Python
python使用mysql的两种使用方式
2018/03/07 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Django中ORM的基本使用教程
2020/12/22 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
2014年小学教导处工作总结
2014/12/19 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏