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中实现类的方式探讨
Aug 28 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue2.0模拟锚点的实例
Mar 14 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
react 路由Link配置详解
Nov 11 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
python实现换位加密算法的示例
2018/10/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
解决python3输入的坑——input()
2020/12/05 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
出纳岗位职责范本
2013/12/01 职场文书
上课迟到检讨书
2014/01/19 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
公司股东出资证明书
2014/11/01 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫