将此网页放到有图片的文件夹下，它将自动读取你文件夹里的图片，然后通过滚动的形式显示到页面上。
<!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中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编程、数据库操作（特别是MySQL）以及前后端交互。 首先，我们...
标题和描述中提到的是使用Python进行微信自动化操作的实践，主要涵盖了发送图片、读取聊天记录和自动回复等功能。这通常涉及到几个关键的Python库和技术，包括但不限于：`pywin32`、`pywinauto`、`opencv`以及可能的...
标题中的“广告图片切换(js遍历文件夹)”指的是在网页中使用JavaScript来动态展示广告图片，通过遍历服务器上的一个特定文件夹，根据日期和时间来自动更新展示的图片。这种方式通常用于创建轮播图或者广告轮换效果，...
Swfoto 1.0 是一款flash(swf)读取图片的容器,可以用于各种网站网页中，用来制作图片切换、焦点图使用，自动读取指定文件夹中的图片并显示，功能特点： 图片自动防缩大小，保持比例，不变形 图片采用抗锯齿防缩...
1. **选择源文件夹**：用户需要指定包含待处理图片的文件夹路径，软件会自动读取其中的所有图片文件。 2. **设置目标分辨率**：用户可以在软件中设定希望裁剪到的像素分辨率，例如常见的72 PPI用于网页，300 PPI...
在网页设计中，图片幻灯片是一种常见的交互式元素，用于展示一组图片并以动态方式自动切换，为用户带来良好的视觉体验。标题“图片自动循环显示 js图片幻灯特效.rar”指的是一个使用JavaScript编写的图片轮播插件，...
综上所述，通过结合ASP.NET2.0的文件系统操作、数据绑定技术、动态图片URL生成以及HTTP处理程序的使用，可以有效地实现从文件夹中遍历所有图片，并在网页上展示或生成缩略图的功能。这种实现方式不仅提高了网站的...
在上述代码中，我们首先获取了图片容器元素，并通过`getElementsByTagName`获取所有`<img>`元素。然后，定义了一个`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是.NET Framework的一部分，提供了一个强大的平台来创建桌面应用程序，...
"抓取网页图片1.0"是一款小巧而实用的工具，专门用于帮助用户便捷地将网页中的图片下载到本地计算机上。本文将深入探讨网页图片抓取的技术原理，并结合该软件的使用说明，解析其工作流程，以期为读者提供实用的操作...
在网页设计中，图片滚动效果是一种常见的动态展示方式，它能吸引用户注意力并提升网站的交互体验。在本文中，我们将深入探讨如何使用JavaScript、ASP.NET以及C#语言来实现这种效果。 首先，我们来看标题中的关键词...