收藏 不显示删除回复显示所有回复显示星级回复显示得分回复 ASP加javascript实现图片轮流显示(图片路径从数据库中读取)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr> <td height="23" colspan="3" background="img/newsreport.jpg"> </td> </tr>
<%
dim strsql
dim rsd '数据库记录对象
dim str1
dim str2
dim nImgNumb:nImgNumb=0
strsql="select top 4 连接名,照片内容 from 图片资料 where 新闻=1 and (上传时间 between '" & CStr(date-120) & "' and '" & CStr(date) & "') order by 上传时间 desc"
set rsd=server.createobject("adodb.recordset")
rsd.open strsql,Conn,1
if not (rsd.bof and rsd.eof) then
while not rsd.eof
str1=str1&"http://10.168.234.99:81/ziliao/zhaopian/"&rsd("连接名")&"|"
str2=str2&rsd("照片内容")&"|"
rsd.movenext
wend
if len(str1)>0 then
str1=left(str1,len(str1)-1)
str2=left(str2,len(str2)-1)
end if
nImgNumb=rsd.recordcount
end if
rsd.close
set rsd=nothing
%>
<script language="javascript">
var strT=" <%=str1%>";
var Srcs=strT.split("|");
var links=Srcs;
strT=" <%=str2%>";
var titles=strT.split("|");

var nImgNum= <%=nImgNumb%>; //得到图像的数量
var nWidth=200; //图像的宽度
var nHeight=160; //图像的高度
var nInterval=5000; //间隔时间,以毫秒为单位
var nImgIndex=-1; //初始值为-1的原因:在实现图片轮流显示的时候我是先自增再使用,相信你看完我的代码就会明白的。

function SetSpanbgColor(nIndex)
{
var i;
for(i=0;i <nIndex;i++) document.getElementById("span"+i).style.backgroundColor="#CC00CC";
document.getElementById("span"+nIndex).style.backgroundColor="#00FFFF";
for(i=nIndex+1;i <nImgNum;i++) document.getElementById("span"+i).style.backgroundColor="#CC00CC";
}

function ShowImgRator()
{

nImgIndex++;
nImgIndex=nImgIndex <nImgNum?nImgIndex:0;
var strHtml=" <img border='0' src='"+Srcs[nImgIndex]+"' width='"+String(nWidth)+"' height='"+String(nHeight)+"'> </img>";
strHtml=" <a href='"+links[nImgIndex]+"' target=/"_blank/">"+strHtml+" </a>";
var transition=parseInt(Math.random()*23);
with(document.getElementById("ImgTank"))
{
filters[0].Transition=transition;
filters[0].apply();
innerHTML=strHtml;
filters[0].play();
}
document.getElementById("ImgContent").innerHTML=titles[nImgIndex];
SetSpanbgColor(nImgIndex);
}

function PageLoad()
{
if(nImgNum==0)
{
document.getElementById("ImgTank").style.height="20px";
document.getElementById("ImgTank").innerHTML="无最新图片";
return;
}
var i;
for(i=0;i <nImgNum;i++)
{
document.getElementById("span"+i).style.cursor="hand";
}
SetSpanbgColor(0);
document.getElementById("ImgTank").filters[0].Duration=2;
ShowImgRator();
setInterval(ShowImgRator,nInterval);
}

function span_onClick(nIndex)
{
nImgIndex=nIndex-1;
ShowImgRator();
}
</script>

<tr>
<td height="170" width="220" align="center" valign="middle">
<div id="ImgTank" style="height:163px;filter:progid:DXImageTransform.Microsoft.RevealTrans();"> </div>
<%if nImgNumb>0 then%> <div class="NormalSize">| <%for i=0 to nImgNumb-1%> <span onClick="span_onClick( <%=i%>);" onMouseOver="SetSpanbgColor( <%=i%>);" onMouseOut="SetSpanbgColor(nImgIndex);" id="span <%=i%>">&nbsp; <%=i+1%>&nbsp; </span>| <%next%> <%end if%> </div>
</td>
<td rowspan="2" width="2" bgcolor="#FFFFFF"> </td>
<td class="NormalSize" valign="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<%
dim rsNews
set rsNews=server.CreateObject("ADODB.Recordset")
rsNews.open "NewsReport order by 编号 desc",conn,1
for i=1 to 5
if not rsNews.eof then
%>
<tr title=" <%=rsNews("标题") & vbCrlf & "作者:" & rsNews("作者")%>">
<td> <a href="upload_file/NewsReport File/ <%=rsNews("文件名")%>" class="URL_BlackStyle" target="_blank"> <%=StringCutup(rsNews("标题"),11)%> </a> </td>
<td width="60" class="NormalSize"> <%="("&month(rsNews("发表日期"))&"月"&day(rsNews("发表日期"))&"日)"%> </td>
</tr>
<%
    rsNews.movenext
end if
next
rsNews.close
set rsNews=nothing
%>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" class="NormalSize" id="ImgContent" height="26"> </td>
<td align="right"> <a href="NewsReport/NewsReport.asp" class="URL_BlackStyle">更多... </a> </td>
</tr>
</table>
    实现的环境:服务器为Win2000 Server,客户端为IE6.0浏览器。
    该代码可以实现从数据库中得到机几张图片的路径并轮流显示。在显示的时候使用了style中的滤镜效果达到图片切换时的各种切换效果,而且使用了随机函数来让每次切换时的效果都是随机的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值