`
kk48323201
  • 浏览: 92078 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

图形幻灯播放器 Javascript 版本

阅读更多
//	------------使用说明------------------------
//	1、在HTML页面引用,js脚本名可以自己定义 <script language="javascript" src="my.js"><\/script>
//	2、通过 PHP、ASP 等脚本语言生成: 图片地址|Http地址|图片地址|Http地址 ......成对列表,
//		str = 'P20010725175318.jpg||P20020307152133.jpg||P20020307152545.jpg||P20030224125949.jpg||P20030319093723.jpg|';
//	3、调用播放器函数,参数解释 xkq_show(播放器宽,播放器高,图片|Http地址字符串)
//		xkq_show('myplay',3000,387,150,str); 
//		在 宽387,高150 容器名称为myplay 的区域 循环播放 str 中指定图片,延迟3000ms,图片打开URL(Http)地址都为空。


//************************************************/

//当前播放的IMG
	var NowFrame2 = 1;
	
	//最多能够播放IMG数量
	var MaxFrame2 = 2;
	
	//初始 IMG
	var bStart2 = 0;
	
	//播放器 宽、高、名、时间
	var xkq_width2,xkq_height2,xkq_name2,xkq_time2;
	xkq_width2 = 185;
	xkq_height2 = 151;
	xkq_name2 = 'oTransContainer2';
	xkq_time2 = 3000;
	
	//图片容器对象
	var img_context2;
	
	//***********************************************
	//初始化 javascript 播放器:xkq_init(width,height)
	//参数:
	//     width	播放器宽
	//     height	播放器高
	//***********************************************
	function xkq_init2(name,time,width,height)
	{
		xkq_width2 = width;
		xkq_height2 = height;
		xkq_name2 = name;
		xkq_time2 = time;
		document.write('<DIV id="'+xkq_name2+'div" style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion=\'forward\'); WIDTH: '+xkq_width2+'px; HEIGHT: '+xkq_height2+'px">'+'<span id="'+xkq_name2+'span">'+'</span>'+'</DIV>');		
		
	}
	
	
	//************************************************
	//构造图片具体内容:xkq_addImg(img_list)
	//参数:
	//		img_list	要播放的图片列表 用 | 分开 ,具体为 图片地址、链接地址
	//************************************************
	function xkq_addImg2(img_list)
	{
		var img_array = new Array();
		img_array = img_list.split('|');
		
		//如果 addflags为TURE,则当前为图片地址;为FALSE,则当前为图片超级连接地址
		var addflags = true;
		
		//图片名称下标
		var j = 1 ;
		
		var tmpstr = '';
		MaxFrame2 = (img_array.length)/2;
		for (var i=0 ; i<img_array.length ; i++ )
		{
		 	if ( addflags)
			{	
				if ( j==1 )
					tmpstr = '<img src="'+img_array[i]+'" id='+xkq_name2+j+' style="DISPLAY: block" border="0" width="'+xkq_width2+'" height="'+xkq_height2+'" />';
				else
					tmpstr = '<img src="'+img_array[i]+'" id='+xkq_name2+j+' style="DISPLAY: none" border="0" width="'+xkq_width2+'" height="'+xkq_height2+'" />';
				addflags = false;
			}else
			{
				addflags = true;
				j = j+1;
				if (img_array[i]!='' )
					tmpstr = '<a target="_parent" href="'+img_array[i]+'">' + tmpstr + '</a>';
				else
					tmpstr = '<a target="_parent" href="#">' + tmpstr + '</a>';
				
				img_context2.innerHTML = img_context2.innerHTML + tmpstr;
				tmpstr = '';	
			}
		}
	}
	
	//*******************************************
	//播放器主函数:fnToggle()
	//参数:
	//		无参数
	//*******************************************
	function fnToggle2() {
	 var next = NowFrame2 + 1;
	 if(next == MaxFrame2+1) 
	 {
	  NowFrame2 = MaxFrame2;
	  next = 1;
	 }
	 if(bStart2 == 0)
	 {
	  bStart2 = 1;
	  
	  setTimeout('fnToggle2()', xkq_time2);
	  return;
	 }
	 else
	 {
	  eval(xkq_name2+'div').filters[0].Apply();
	  document.images[xkq_name2+next].style.display = "";
	  document.images[xkq_name2+NowFrame2].style.display = "none"; 
	  eval(xkq_name2+'div').filters[0].Play(duration=2);
	  if(NowFrame2 == MaxFrame2) 
	   NowFrame2 = 1;
	  else
	   NowFrame2++;
	 } setTimeout('fnToggle2()', xkq_time2+3000);
	}

	
	
	//************************************************************************
	//播放函数:xkq_show(name,time,width,height,img_list)
	//参数
	//		name	播放器容器名称
	//		time	播放延时
	//		width	播放器宽
	//		height	播放器高
	//		img_list要播放的图片列表 用 | 分开 ,具体为 图片地址、链接地址
	//************************************************************************
	function xkq_show2(name,time,width,height,img_list)
	{
		
		//如果播放器宽或高不正确,则退出播放,显示无法播放
		if ( width<=0 || height<=0 )
		{
			xkq_init2(name,time,20,20);
			img_context2 = document.getElementById(xkq_name2+'span');			
			img_context2.innerHTML = '无法播放图片!';
			return ;
		}
		xkq_init2(name,time,width,height);
		img_context2 = document.getElementById(xkq_name2+'span');
		xkq_addImg2(img_list);
		fnToggle2();
	}
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 ...

    JavaScript网页特效范例宝典源码

    实例242 幻灯片式播放图片 374 实例243 无间断的图片循环滚动效果 376 8.7 图片的其他效果 377 实例244 导航地图 377 8.8 播放音乐 378 实例245 为网页设置背景音乐 378 实例246 随机播放背景音乐 380 实例247 MIDI...

    仅用CSS创建立体旋转幻灯片

    译者注:观看示例请使用最新版的Safari(5.0.3以上版本)或Chrome(10.0.648以上版本),Chrome需打开about:flags,开启“GPU加速合成”-使用图形处理器 (GPU)硬件启用网页的3DCSS和更高性能的合成。在这个教程里,...

    auditorium:由Python驱动的带有类固醇的幻灯片制作器

    您编写纯Python代码,并获得HTML + JavaScript幻灯片(使用令人惊叹的库)。 令人敬畏的原因是您的Python后端已连接到幻灯片放映前端,这使您的幻灯片放映可以根据用户输入动态更改或自动更改。 这为一些有趣的...

    ib-formation-ce999-21102004

    iB培训使用HTML5,CSS3和JavaScript开发图形用户界面的基础参考:CE999 日期:2021年4月26日至30日内容 HTML / CSS:提醒(幻灯片3至29) HTML5 / CSS3:网络革命(幻灯片138至142) HTML5 / CSS3:标记(幻灯片143...

    javascript网页特效实例大全(8-12)

    第8章 图形图像与多媒体 335 8.1 图片大小 336 实例215 打开自定义大小的图片 336 实例216 图片放大缩小 337 实例217 通过鼠标滚轮放大缩小图片 338 8.2 图片与鼠标相关操作 339 实例218 跟随鼠标移动...

    doggie-slides:一个Web应用程序,它支持CRUD和演示文稿的基本PowerPoint样式的幻灯片以及由可伸缩矢量图形提供支持的元素(注意

    自述文件一个Web应用程序,它支持CRUD和演示文稿的基本PowerPoint样式的幻灯片以及由可伸缩矢量图形提供支持的元素(注意:这是Wengong Lai的App Academy的Full-Stack Project的Google幻灯片的克隆)。 您可能要讲的...

    remark:一个简单的,浏览器内,markdown驱动的幻灯片演示工具-开源

    一个简单的,由浏览器内部,由Markdown驱动的幻灯片放映工具,面向的是了解HTML和CSS方式的人们。 如果您理想的幻灯片创建工作流程包含以下... Markdown格式的文本块通过在浏览器中运行JavaScript转换为单独的幻灯片。

    psd2pptx:将 Photoshop (PSD) 图层转换为 PowerPoint (PPTX) 幻灯片

    这是一个小型 Node 实用程序,用于将 Photoshop (PSD) 图形文件的图层转换为 PowerPoint (PPTX) 演示文稿的幻灯片。 其目的是在 Procreate(在 iPad 上)等应用程序中将幻灯片手绘为单独的透明图层,并将图层转换为...

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4...

    XSlides:用于演示幻灯片的基于XML的系统

    XSlides是用于演示幻灯片的基于XML的系统。 我将其开发为PowerPoint的个人替代品。 我做了很多包含源代码的演示。 粘贴和突出显示语法的源代码很尴尬。 我做了很多较大的演示,其中包括较小的模块。 管理模块化...

    closures:您不会相信这种重写闭包的怪异方法

    上有幻灯片将代码转换为无闭包等效项要将某些常规JavaScript转换为演示的无封闭版本,请访问并添加一些代码。 请注意,它非常有限,不会处理任何边缘情况(例如,每行多个var声明,函数声明等)

    河马动画师 Hippo Animator 5.1.5995 中文多语版 HTML 动画工作室.rar

    添加幻灯片和图像的网格。淡出或滑动图像之间。后电影已加载加载图像的大小。控制显示使用脚本命令来播放、 暂停、 回去和转发。 视频 添加 MP4、 Ogg、 WebM,YouTube 或 Vimeo 视频。Hippo Animator 使用 HTML5 ...

    steampunkd:使用古董打印机图形的Wordpress主题

    一个Wordpress主题突出显示了古董打印机的图形,捕捉了19世纪古董打印机图像的怀旧和古怪,并在您的博客中重新展示了它们。 这种响应式主题提供一栏和两栏的页面格式,自定义的首页布局以及全角模板中的精选幻灯片...

    fowd-london-2014:我在 2014 年伦敦网页设计的未来演讲中的幻灯片

    FOWD 伦敦 | 图形的尖端 CSS 功能我在演讲中的幻灯片。演示此 HTML 幻灯片使用尖端 CSS 功能进行演示。 它旨在在受控环境中呈现。 您可以尝试通过在chrome://flags启用实验性网络平台功能标志的情况下运行来复制该...

    ispy-webgl:使用WebGL在LHC上进行CMS实验的基于浏览器的事件显示

    iSpy WebGL 这是什么? 这是在LHC上使用的的基于浏览器的事件显示。 “生产”版本在这里: 开发版本在这里: 有关输入数据格式以及如何为显示创建文件的更多... “ WebGL(Web图形库)是一个JavaScript API,可

    高性能 NoSQL 数据库 ArangoDB.zip

    同时也是一个高性能数据库,支持类似SQL的查询以及JavaScript活Ruby扩展.特性:1. 多数据模型: 可以灵活的使用Key-Value,document,graph或者他们的组合作为你的数据模型.2.方便的查询:支持类似SQL的查询语法AQL.或者...

    Rdataviz:加州大学伯克利分校生物统计学高级 R 数据可视化演示幻灯片

    数据可视化该存储库包含题为“高级 R 数据可视化”的幻灯片,于 2015 年 2 月 24 日向加州大学伯克利分校生物统计专业的学生展示。演示文稿中包括使用和当前可用于的交互式图形创作包的子集R. 甲板是使用包,并得到...

Global site tag (gtag.js) - Google Analytics