修改的广告图片轮播效果，可作为在线图片浏览器。

来源：互联网发布：python 符号替换编辑：程序博客网时间：2024/06/12 01:40

早就发现现在好多新闻网站的最新动态都采用图片轮播的效果，由于比较懒，没有仔细的研究过。

这几天闲着没事，弄下来分析了分析。

以下是从中关村在线网站上取下来的，请看：

<SCRIPT language="JavaScript">
function playTran()
{
if (document.all)
imgInit.filters.revealTrans.play();
}

function goUrl()
{
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != '')
{
   if (jumpTarget != '')
    window.open(jumpUrl,jumpTarget);
   else
   location.href=jumpUrl;
}
}

function Sword()
{
showword.innerHTML=imgWord[adNum];
}

/* 预读取图片 */
function preloadPic()
{
imgInit.src=imgUrl[1];
  if (document.all)
{
  var imgPreload = new Image();
  for (i=0; i<imgUrl.length; i++)
  {
   imgPreload.src = imgUrl[i]
  }
}
else
{
  theTimer = setTimeout("preloadPic()",50);
}
}
</SCRIPT>

<BR>

/* 计算有效的轮播图片个数 j */
var j=0;
for (i=1;i<count;i++)
{
if( (imgUrl[i]!='') && (imgLink[i]!='') )
{
    j++;
    }
else
{
  break;
}
}
/* 计算有效的轮播图片个数 j 结束 */
var key=0;
var imgInit = document.getElementById('imgInit');
var showword = document.getElementById('showword');
preloadPic();
nextAd();
</script>

其实仔细看看也不难，原理就是用：JS实现图片地址和对应信息的轮换。

完全可以利用它做一个图片浏览程序，思路是这样的：
图片的地址和图片的信息用ASP的FSO实现采用动态采集，这样的话，就只管往目录里传图片，通过ASP和JAVASCRIPT的结合就可实现目录内图片的轮播。

实现代码如下：

<%
function folderList(path)
    dim fso
    dim tmpFolderStr
    tmpFolderStr=""
    set fso=server.CreateObject("scripting.filesystemobject")
    'on error resume next
    set objFolder=fso.GetFolder(path)
    set objSubFolders=objFolder.Subfolders
    for each objSubFolder in objSubFolders
        'Response.Write objSubFolder.name
        tmpFolderStr=tmpFolderStr + objSubFolder.name + "|"
    next
    set objFolder=nothing
    set objSubFolders=nothing
    set fso=nothing
    folderList=tmpFolderStr
end function
'=================================================================
function fileList(path)
    dim fso
    dim tmpFileListStr
    set fso=server.CreateObject("scripting.filesystemobject")
    'on error resume next
    set objFolder=fso.GetFolder(path)
    set objFiles=objFolder.Files
        for each objFile in objFiles
            'Response.Write " ---"
            'Response.Write objFile.name
            'response.write objFile.type
            tmpFileListStr=tmpFileListStr + objFile.name + "|"
        next
        'Response.Write "<p>"
    set objFiles=nothing
    set objFolder=nothing
    set fso=nothing
    fileList=left(tmpFileListStr,len(tmpFileListStr)-1)
end function

'==================================================================
sub showFolder()
    dim folderArr,i
    folderArr = Split(folderlist(server.mappath("./")),"|")
    For i = Lbound(folderArr) to Ubound(folderArr)
        Response.Write "<a href=?folderName=" & folderArr(i) & ">" & folderArr(i) & "</a><br><br>"
    Next
end sub

'==================================================================

sub rotateImg()
    dim fileArr,folderName
    folderName=trim(request.querystring("folderName"))
    fileArr = Split(filelist(server.mappath("./") + "/" & folderName),"|")
%>
<script language="javascript">
function playTran()
{
  if (document.all)
  imgInit.filters.revealTrans.play();
}

function goUrl()
{
jumpUrl=imgUrl[adNum];
jumpTarget='_blank';
if (jumpUrl != '')
{
   if (jumpTarget != '')
    window.open(jumpUrl,jumpTarget);
   else
   location.href=jumpUrl;
}
}

function Sword()
{
showword.innerHTML=imgUrl[adNum];
}

<BR>

/* 计算有效的轮播图片个数 j */
var j=0;
for (i=1;i<=count;i++)
{
if(imgUrl[i]!='')
{
    j++;
    }
else
{
  break;
}
}
/* 计算有效的轮播图片个数 j 结束 */
var key=0;
var imgInit = document.getElementById('imgInit');
var showword = document.getElementById('showword');
preloadPic();
nextAd();
</script>

<%
end sub
'================================================================
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="myhon,王向超" />
<meta name="copyright" content="www.myhon.cn" />
<link rel="icon" href="myhon.ico" _fcksavedurl=""myhon.ico"" _fcksavedurl=""myhon.ico"" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<title>::www.myhon.cn 图片列表程序::</title>
</head>
<body>
<div id="header">图片列表程序</div>
<div id="content"><br/>
<%
if trim(request.querystring("folderName"))="" then
    call showFolder()
else
    call rotateImg()
end if
%>
</div>
<div id="footer">CopyRight:www.myhon.cn</div>
</body>
</html>

演示地址：http://www.myhon.cn/myphoto/