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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
心扬JS分页函数代码
Sep 10 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Apache如何部署django项目
2017/05/21 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python程序变成软件的实操方法
2019/06/24 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
小区消防演习方案
2014/02/21 职场文书
村干部承诺书
2014/03/28 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js