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实现客户端表格的分页、排序功能代码
Mar 16 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 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
PHP实现Socket服务器的代码
2008/04/03 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
农村党支部先进事迹
2014/01/14 职场文书
出纳员的岗位职责
2014/02/22 职场文书
教师师德承诺书
2014/03/26 职场文书
导师评语大全
2014/04/26 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
个人授权委托书格式
2014/08/30 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
现实表现材料范文
2014/12/23 职场文书
检讨书格式范文
2015/05/07 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL
css3应用示例:新增的选择器
2022/03/16 HTML / CSS