js 自动播放的实例代码

代码如下:

<!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>

定义播放时间,可以定义事件

(0)

相关推荐

  • js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

    本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu

  • JS网页播放声音实现代码兼容各种浏览器

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SwfObject2

  • JS HTML5 音乐天气播放器(Ajax获取天气信息)

    晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条

  • js wmp操作代码小结(音乐连播功能)

    WMP-网页中常见属性和方法 <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" id="wmp" width="0" height="0" style="width:0px;height:0px;"></object> //基本属性

  • js实现幻灯片播放图片示例代码

    1,在页面添加下面的元素.展示出置出图片文件列表文件. 复制代码 代码如下: <select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> <option value="图片的url">图片名字</option> </select> 2,播放文件列表的方法.主要是遍历文件列

  • 基于js与flash实现的网站flv视频播放插件代码

    本文实例讲述了基于js与flash实现的网站flv视频播放插件代码.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js 自动播放的实例代码

    复制代码 代码如下: <!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;

  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

  • vue+node 实现视频在线播放的实例代码

    1.node服务端 数据流传输,可在线缓存 //获取参数 var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必须使用绝对路径,使用相对路径会直接下载文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //获取文件信息 let fileSize = stat.size; let range = req.header

  • 动态加载js、css的实例代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • Automapper实现自动映射的实例代码

    出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要的信息,大大增强数据安全性. 下面给出两个相互对应的关系模型User.UserDto public class User { private const int NameMaxLength = 20; private const int PassWordMaxLength = 16; [Key] p

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • 使用cropper.js裁剪头像的实例代码

    最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下..用起来挺简单的,下面是我做的一个小例子: 开始先放个成品图: 下面给出前后端的代码 前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好. 关于jsp页面引用的两个关于cropper的 文件,我就不提供了.大家需要的可以去官方的github上去下载. 地址:https://github.com/fengyuanchen/cropper <%@ page language="ja

  • 简单封装js的dom查询实例代码

    最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询 $ = function (val) { switch(val.charAt(0)) { case '#' : return document.getElementById(val.substring(1)); break; case '.' : val = val.replace('.',''); if(document.getElementsByClassName) return document.getElementsByClas

  • Mybatis结果集自动映射的实例代码

    在使用Mybatis时,有的时候我们可以不用定义resultMap,而是直接在<select>语句上指定resultType.这个时候其实就用到了Mybatis的结果集自动映射.Mybatis的自动映射默认是开启的,有需要我们也可以将其关闭(还可以调整自动映射的策略). 1       Mybatis结果集自动映射 在使用Mybatis时,有的时候我们可以不用定义resultMap,而是直接在<select>语句上指定resultType.这个时候其实就用到了Mybatis的结果集

随机推荐