修改的广告图片轮播效果,可作为在线图片浏览器。
来源:互联网 发布:python 符号替换 编辑:程序博客网 时间:2024/04/28 09:55
早就发现现在好多新闻网站的最新动态都采用图片轮播的效果,由于比较懒,没有仔细的研究过。
这几天闲着没事,弄下来分析了分析。
以下是从中关村在线网站上取下来的,请看:
<!-- js多图切换 -->
<SCRIPT language="JavaScript">
function playTran()
{
if (document.all)
imgInit.filters.revealTrans.play();
}
function nextAd()
{
if(adNum<j)
adNum++;
else
adNum=1;
if( key==0 )
{
key=1;
}
else if (document.all)
{
imgInit.filters.revealTrans.Transition=10;
imgInit.filters.revealTrans.apply();
playTran();
}
imgInit.src=imgUrl[adNum];
theTimer=setTimeout('Sword()', 500);
theTimer=setTimeout("nextAd()", 6000);
}
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>
<A href="javascript:goUrl()" target=_self>
<IMG style="FILTER: revealTrans(duration=1,transition=5); src="javascript:void(null)" id="imgInit">
</A>
<BR>
<SPAN id=showword style="COLOR: red" width="252">
</SPAN>
<script>
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
adNum=0;
/* 图片地址,信息 数组 */
imgUrl[1] ="images/1.jpg";
imgLink[1] ="#";
imgWord[1] ="<a href='http://www.myhon.cn/images/kang1.jpg' target='_blank'>1</a>";
imgUrl[2] ="images/2.jpg";
imgLink[2] ="#";
imgWord[2] ="<a href='http://www.myhon.cn/images/2.jpg' target='_blank'>2</a>";
var count=2;
var imgPre=new Array();
/* 计算有效的轮播图片个数 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多图切换结束-->
其实仔细看看也不难,原理就是用: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 nextAd()
{
if(adNum<j)
adNum++;
else
adNum=1;
if( key==0 )
{
key=1;
}
else if (document.all)
{
imgInit.filters.revealTrans.Transition=10;
imgInit.filters.revealTrans.apply();
playTran();
}
imgInit.src=imgUrl[adNum];
theTimer=setTimeout('Sword()', 500);
theTimer=setTimeout("nextAd()", 6000);
}
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];
}
/* 预读取图片 */
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>
<div>
<a href="javascript:history.back(-1)">返 回</a><br/><br/>
</div>
<A href="javascript:goUrl()" target=_self>
<IMG style="FILTER: revealTrans(duration=1,transition=5); border:0px; src="javascript:void(null)" id="imgInit">
</A>
<BR>
<SPAN id=showword style="COLOR: red" width="252">
</SPAN>
<script>
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
adNum=0;
var count=<%=Ubound(fileArr)+1%>;
<%For i = Lbound(fileArr)+1 to Ubound(fileArr)+1%>
imgUrl[<%=i%>]="<%=folderName+"/"+fileArr(i-1)%>";
<%Next%>
var imgPre=new Array();
/* 计算有效的轮播图片个数 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>
<!--js多图切换结束-->
<%
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/
- 修改的广告图片轮播效果,可作为在线图片浏览器。
- 图片广告页效果,图片轮播效果
- 带bar的横向图片循环轮播(可修改轮播速度)
- 图片轮播效果
- 图片轮播效果
- 图片轮播效果
- 图片轮播效果
- 图片轮播效果
- ANDROID轮播广告图片
- Android fragment中广告图片轮播效果的实现(附图 )
- 轮播 效果 可套用图片 文本 jquery
- 简单的Js图片轮播效果
- TouchSlide (图片轮播的效果)
- 图片轮播效果的实现
- 基础的图片轮播效果
- jquery的图片轮播效果
- JS下的图片轮播效果
- jquery banner广告幻灯片图片轮播切换,模仿实现当当网滚动广告效果
- 阅读程序,学习程序开发的关键环节
- font.conf配置记录备忘
- 关于SWT线程异常
- Windows快捷键
- C++程序员必需的修养
- 修改的广告图片轮播效果,可作为在线图片浏览器。
- FreeBSD软件安装卸载工具--Ports和Packages详解!
- 一个国内访问非常快的UNIX类产品镜象
- 高效的jsp分页查询
- 真高兴@
- ASP.NET中的绑定(DataBind)问题
- Transact SQL 常用语句以及函数
- mono-Gtk中的容器类
- SQL SERVER的内存会不断增加,问题分析