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 imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
使用jQuery实现购物车
Oct 29 jQuery
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
鼠标滚轴控制文本框值的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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php的array_multisort()使用方法介绍
2012/05/16 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript 中that的含义示例介绍
2014/05/14 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue实现信息管理系统
2020/05/30 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python制作刷网页流量工具
2017/04/23 Python
Python对象与引用的介绍
2019/01/24 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python游戏开发的五个案例分享
2020/03/09 Python
python代码xml转txt实例
2020/03/10 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
网络管理专业求职信
2014/03/15 职场文书
绿色环保演讲稿
2014/05/10 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL