`
alvinqq
  • 浏览: 185420 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

自动读取文件夹中图片并显示在网页中

阅读更多
将此网页放到有图片的文件夹下,它将自动读取你文件夹里的图片,然后通过滚动的形式显示到页面上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="Javascript"type="text/javascript">

	function loadImage()
	{
		
		var fso=new ActiveXObject("Scripting.FileSystemObject");
		
		var path=document.location;
		
		path=turnPath(path);

		var folder=fso.GetFolder(path);

		//alert("文件数:"+folder.Files.Count);
		var pathArray=new Array();

		var format=['jpg','JPG','gif','GIF','png','PNG','bmp','BMP','jpeg','JPEG'];

		var filesEnum=new Enumerator(folder.Files);

		for(;!filesEnum.atEnd();filesEnum.moveNext())
		{
			//document.write(filesEnum.item().Name+"<br />");
			//文件名
			var filename=filesEnum.item().Name;
			//文件后缀名
			var file_format=filename.substring(filename.lastIndexOf(".")+1,filename.length);
			for(var i=0;i<format.length;i++)
			{
				if(file_format==format[i])
				{
					pathArray.push(filename);
				}
			}
		}
		createImageTable(pathArray,path);
		
	}
	//过滤路径
	function turnPath(path)
	{
		var p=path+"";
		p=p.substring(8,p.lastIndexOf("/"));
		return p;
	}

	function createImageTable(ImageList,path)
	{
		
		//var ImageTable=document.getElementById("ImageTable");
		
		var table=document.createElement("table");
		var tbody=document.createElement("tbody");
		var tr=document.createElement("tr");

		for(var i=0;i<ImageList.length;i++)
		{
			var td=document.createElement("td");
			//var div=document.createElement("div");
			var img=document.createElement("img");		
			img.src=path+"\\"+ImageList[i];
			img.width=150;
			img.height=100;	
			img.style.cursor="pointer";
			img.onclick=function(){createBigImage(this.src);};//createBigImage(img.src);
			td.appendChild(img);
			tr.appendChild(td);	
		}
		tbody.appendChild(tr);
		table.appendChild(tbody);
		
		document.getElementById("div").appendChild(table);
	}

	function createBigImage(src)
	{
		var bigImg=document.getElementById("bigImg");
		var remark=document.getElementById("remark");
		var img=document.createElement("img");
		img.src=src;
		img=setImage_W_H(img);
		bigImg.innerHTML="";
		remark.innerHTML=src.substring(src.lastIndexOf("/")+1,src.lastIndexOf("."));
		bigImg.appendChild(img);
	}

	function setImage_W_H(img)
	{
		//alert(img.width+"  "+img.height);
		var W=600;
		var H=480;
		var scale_1=W/H;
		var width=img.width;
		var height=img.height;
		var scale_2=width/height;
		if(scale_1>scale_2)
		{
			if(H<=height)
			{
				height=H;
				width=Math.round(height*scale_2);
			}
		}
		else if(scale_1<scale_2)
		{
			if(W<=width)
			{
				width=W;
				height=Math.round(width/scale_2);
			}
			
		}
		else
		{
			if(W<width)
			{
				width=W;
				height=Math.round(width/scale_2);
			}
		}
		img.width=width;
		img.height=height;
		return img;
	}
	</script>
 </head>

 <body onload="loadImage();">
 <table width="100%" height="100">
 <tr>
 <td width="20">
 <div style="cursor:pointer;height:100px" onmousedown="marquee.start();document.getElementById('marquee').direction='left';" onmouseup="marquee.stop();" title="向左移">
	▊▊<br>
	▊▊<br>
	▊▊<br>
	◀▊<br>
	▊▊<br>
	▊▊<br>
	▊▊<br>
</div>
 </td>
 <td>
  <marquee id="marquee" onmouseover="this.stop();" onmouseout="this.start();" style='background:#eeeeee;padding: 0px; white-space: nowrap;border:1px solid #606080;' direction="right" scrollamount=10 height='100' width='100%'>
   <div id="div"></div>
  </marquee>
 </td>
 <td width="20">
 <div style="cursor:pointer;height:100px" onmousedown="marquee.start();document.getElementById('marquee').direction='right';" onmouseup="marquee.stop();" title="向右移">
	▊▊<br>
	▊▊<br>
	▊▊<br>
	▊▶<br>
	▊▊<br>
	▊▊<br>
	▊▊<br>
</div>
 </td>
 </tr>
 
 </table>
 <table width="100%" style="border:10px solid #606080;background:#eeeeee" height="100%">
	<tr align="center" height="98%">
	<td>
		<div id="bigImg" align="top"></div>
	</td>
	</tr>
	<tr align="center" height="2%">
	<td>
		<div id="remark"></div>
	</td>
 </tr>
 </table>
 </body>
</html>
分享到:
评论

相关推荐

    Html读取本地文件夹下图片并显示的示例代码

    在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有图片并显示在页面。 技术分析: 存在问题 Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。 解决方法: 调用Web API接口...

    浏览图片代码-查看某个文件夹中的图片,显示在网页中

    查看某个文件夹中的图片,显示在网页中。程序片: package tom.jiafei; import java.io.*; class FileName implements FilenameFilter { public boolean accept(File dir,String name) { boolean boo=false; if...

    java实现本地读取图片存储到数据库中并在html网页显示

    在本文中,我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中,之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作(特别是MySQL)以及前后端交互。 首先,我们...

    使用 PHP显示文件夹中的所有图像_ PHP_代码_下载

    一个简单的网页,用于显示文件夹中的所有图像。它需要 PHP。 图像将显示的最大宽度为 900 像素。如果单击它,大于 900 像素的图像将显示其完整大小。 您可以链接到特定图像,因为它们是链接锚定的。只需单击特定...

    Python自动化操作电脑微信实现发送图片,读取微信聊天记录,自动回复功能 完整代码-带复制工具-带检测ui工具

    标题和描述中提到的是使用Python进行微信自动化操作的实践,主要涵盖了发送图片、读取聊天记录和自动回复等功能。这通常涉及到几个关键的Python库和技术,包括但不限于:`pywin32`、`pywinauto`、`opencv`以及可能的...

    广告图片切换(js遍历文件夹)

    标题中的“广告图片切换(js遍历文件夹)”指的是在网页中使用JavaScript来动态展示广告图片,通过遍历服务器上的一个特定文件夹,根据日期和时间来自动更新展示的图片。这种方式通常用于创建轮播图或者广告轮换效果,...

    Swfoto 可用于图片展示的Flash图片读取容器.rar

    Swfoto 1.0 是一款flash(swf)读取图片的容器,可以用于各种网站网页中,用来制作图片切换、焦点图使用,自动读取指定文件夹中的图片并显示,功能特点:  图片自动防缩大小,保持比例,不变形  图片采用抗锯齿防缩...

    批量将文件夹中所有的图片裁剪为统一像素分辨率的图片处理软件.rar

    1. **选择源文件夹**:用户需要指定包含待处理图片的文件夹路径,软件会自动读取其中的所有图片文件。 2. **设置目标分辨率**:用户可以在软件中设定希望裁剪到的像素分辨率,例如常见的72 PPI用于网页,300 PPI...

    图片自动循环显示 js图片幻灯特效.rar

    在网页设计中,图片幻灯片是一种常见的交互式元素,用于展示一组图片并以动态方式自动切换,为用户带来良好的视觉体验。标题“图片自动循环显示 js图片幻灯特效.rar”指的是一个使用JavaScript编写的图片轮播插件,...

    ASP.NET2.0遍历文件夹下所有图片

    综上所述,通过结合ASP.NET2.0的文件系统操作、数据绑定技术、动态图片URL生成以及HTTP处理程序的使用,可以有效地实现从文件夹中遍历所有图片,并在网页上展示或生成缩略图的功能。这种实现方式不仅提高了网站的...

    js自动切换图片

    在上述代码中,我们首先获取了图片容器元素,并通过`getElementsByTagName`获取所有`&lt;img&gt;`元素。然后,定义了一个`autoSwitch`函数,该函数隐藏当前显示的图片并显示下一张。最后,我们使用`setInterval`方法,让`...

    网页逐渐放大显示图片_随机_自动

    在本项目中,"网页逐渐放大显示图片_随机_自动"是基于JavaScript实现的。JavaScript是一种强大的客户端脚本语言,常用于网页的交互逻辑和动态效果。在这个场景下,JavaScript代码负责控制图片的加载和放大过程。通过...

    图片保存能手批量保存网页图片

    修改了图片类型自动识别和本地网页横排显示图片的问题 14)7.0修改了定时间隔取图错误,增强了自动抓图功能,软件可以智能升级。 15)7.2增加日期时间+序号选项和特殊图片处理选项 16)7.4兼容vista和傲游2.1.3奥运专用...

    新闻图片轮回显示

    1. **图片资源管理**:首先,需要将所有待展示的图片整合到一起,通常会存储在一个文件夹或XML文件中,方便程序读取和加载。 2. **加载图片**:使用Flash的Loader类加载图片资源。Loader对象可以加载任何形式的二...

    百度编辑器批量上传图片并自动排版

    用户只需在编辑器的图片上传区域点击“选择图片”按钮,或者直接拖拽图片到指定区域,编辑器会自动读取并上传选中的所有图片。同时,百度编辑器还支持图片预览和上传进度显示,提高了用户体验。 接下来,我们讨论...

    网页 多幅图片轮番显示的代码

    网页中的多幅图片轮番显示是一种常见的动态效果,主要用于网站的广告展示、产品展示或轮播图等场景。这种效果通常由JavaScript实现,配合HTML和CSS来完成视觉上的动画过渡。在韩顺平的JSP视频教程中,他讲解了如何...

    C# winform 图片幻灯片方式切换

    在本文中,我们将深入探讨如何使用C# WinForm来实现图片的幻灯片方式切换,这对于产品展示或任何需要连续显示图像的场景都非常有用。C# WinForm是.NET Framework的一部分,提供了一个强大的平台来创建桌面应用程序,...

    抓取网页图片1.0

    "抓取网页图片1.0"是一款小巧而实用的工具,专门用于帮助用户便捷地将网页中的图片下载到本地计算机上。本文将深入探讨网页图片抓取的技术原理,并结合该软件的使用说明,解析其工作流程,以期为读者提供实用的操作...

Global site tag (gtag.js) - Google Analytics