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 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Pytorch 实现权重初始化
2019/12/31 Python
如何教少儿学习Python编程
2020/07/10 Python
vscode调试django项目的方法
2020/08/06 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
党风廉设责任书
2014/04/16 职场文书
服务口号大全
2014/06/11 职场文书
班训口号大全
2014/06/18 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
python实现剪贴板的操作
2021/07/01 Python