利用Javascript与VBscript交互实现图片自动切换
上一篇 / 下一篇 2007-09-14 09:43:03 / 个人分类：ASP
51Testing软件测试网9u+y5J1L?
一、原理说明:
UY ~%H~+Jx!Z01、利用Javascrīpt构造一个HTTP请求向后台数据库请求图片路径和图片描述数据
cOr \O cL02、利用返回的图片数据构造一个图片路径数组和图片描述数组
G]_nK6L+m03、构造一个IMG对象51Testing软件测试网*o^G ?]$s0{X
4、利用javascrīpt的定时函数控制IMG对象的SRC属性和TITLE属性在图片路径数组和图片描述数组各元素之间切换51Testing软件测试网s,tO Dc(cN!~1V
二、文件组成：
:ye's@+w C6Nzf0frontpage.asp
:z ^2C+u
b0loadpicturesource.asp51Testing软件测试网k2\5?/h-}N3A9m
conn.asp51Testing软件测试网]Y)Nhsv.E5p#_
site.MDB51Testing软件测试网I7K4]e1q J}G
三、详细设计：
q2D'npV01、客户端请求调用frontpage.asp: Http - > frontpage.asp51Testing软件测试网%a;KAu3c? Q5`
2、frontpage.asp调用loadpicturesource.asp获取图片数据：frontpage.asp - > loadpicturesource.asp
$rV v @;?]f(w03、loadpicturesource.asp调用site.MDB获取数据存储：loadpicturesource.asp - > site.MDB
7A0D H X+M e
SJk04、frontpage.asp利用调用返回数据构造图片路径数组和图片描述数组
z
e1CH
u8g8f g*G[05、frontpage.asp启动setInterval定时函数进行自动控制51Testing软件测试网s1H1}'YU$u;m6cobt
四、文件内容:
F G%G8K!w/d8x5^ e6C"Z0============================================================================
:Q Kf"[ y8XU!V0frontpage.asp
R8Gz*d:kU/\ d i K7A0============================================================================51Testing软件测试网&K&v;O@ a d!t_$x^
<!--#include file="conn.asp"-->
;p#J/Zjj-c2oH0`"[0<%51Testing软件测试网r![#Pu ^_^ o}-L
dim rs,sSql,sOutput,defaultPicture,defaultDescrīption,interval51Testing软件测试网 Rf&KB.WveZO
'刷新频率
j;[ \5]Px0 interval =5000
_H$?@'gL0 '默认图片和默认说明 51Testing软件测试网V,Y Bb"V
SbE
set rs=server.CreateObject("ADODB.RecordSet")51Testing软件测试网UPCd Bv
sSql = "select top 1 * from pictureSet where PicName = '首页图片' order by updateDate desc"
p b{ S+j9B!lz0 rs.open sSql,conn,1,151Testing软件测试网$] U N
p#i"o ` N{
if not rs.bof and not rs.eof then 51Testing软件测试网a@m S#ww
&b+\Gx7R@1I0 defaultPicture = rs("PicPath")
&d4RPO }\
uX#B0 defaultDescrīption = rs("PicTiTle")
8Ju}d GO9he:@0 End If51Testing软件测试网'Ph%P:}
|6Y-^T It'X
rs.close51Testing软件测试网'|+Wi.@-@ r9T
conn.close51Testing软件测试网K2V"c;o~-F7c-o8ntu
Set rs = Nothing
a:ND
A R"W f(]2g0 Set conn = Nothing51Testing软件测试网P+Evh;y&@
F\
defaultDescrīption = "图片新闻:"&defaultDescrīption&"(点击图片查看放大效果)"
(kq'N"{2M:b0 51Testing软件测试网UhfL&w~AG q
%>51Testing软件测试网 `m i-S)Ij
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">51Testing软件测试网6p:__@5\!rg
<HTML>51Testing软件测试网 c$p D u&a}S\1_
<HEAD>51Testing软件测试网*j3JAr_6U?*Y7v
<TITLE></TITLE>
B+`_XL/vho0<META NAME="Generator" CONTENT="EditPlus">
s|T)d7Rn!OM0<META NAME="Author" CONTENT="">
k
v&E5{/n:[0<META NAME="Keywords" CONTENT="">
+F9m^8K;O6uyM0<META NAME="Descrīption" CONTENT="">
suX[F
{0<scrīpt LANGUAGE="Javascrīpt">51Testing软件测试网)n?(e'vs)E g
<!--
Y1f_ p Fq0var arraySrc;
;Y7a P1K/tv*FZJN0var arrayAlt;51Testing软件测试网? i9N vH5~T
var picNameCounter = 0;51Testing软件测试网!Uq,FK;F+S
function GetServerData(objstrName,objstrValue,serverPage)
&F@ID$dp0{
"~ Q+l,pA*g)Yb
qD0 string=escape(objstrName) +"="+escape(objstrValue);51Testing软件测试网5n,Bfv*?!}Js%{
var ōbjXMLHTTP = null;
\W/ta3[y4a a6x9n0 try 51Testing软件测试网L"g],f+G]/@8K
{
r4X.R&rI#WD-{ x0 objXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP"); 51Testing软件测试网8z~(h!bOYyl
}
#{gG;lz0 catch(e)
K(w R6lE |Cm0 {
M;}"v&eF*?2[]B3h0 try
} KB5V+K'a i0 { 51Testing软件测试网:xb7l |#]r-sx-r
objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP"); 51Testing软件测试网&G U/ng/uM
}
;f];S+F!l b0 catch(e2){}
-V#I+e!|:M4@*^&x0 }51Testing软件测试网 H7_4sKU9F-a
nd
objXMLHTTP.open("POST", serverPage, false);51Testing软件测试网4_3FP2bk#liw
objXMLHTTP.setrequestheader("content-length",string.length);
t3K M2jt)y0 objXMLHTTP.setrequestheader("content-type","application/x-www-form-urlencoded");51Testing软件测试网 Hn9N)R vy
objXMLHTTP.send(string);51Testing软件测试网5t _ C)|U9l1M`+}
O
return objXMLHTTP.responseText; 51Testing软件测试网.a i|c8m%\
}51Testing软件测试网5q2_0Ds7Z
function Initialize()51Testing软件测试网!CA4\+U
lb^'L"J,P
{51Testing软件测试网E(|X"Xq,Y
var returnSrc = GetServerData("PictureSrc","PictureSrc","LoadDisplayPicture.asp");
U-F
WMli%d0 arraySrc= returnSrc.split("|");51Testing软件测试网|ON
qu CY`@
var returnAlt = GetServerData("PictureAlt","PictureAlt","LoadDisplayPicture.asp");
;} w/q9ff7O H#?0 arrayAlt = returnAlt.split("|");
|$hgsC(Q,U6j0 setInterval("PictureLoad()",<%=interval%>);51Testing软件测试网9RA {k'}
}
|c2ZY"y v1Q0Yb!F ~7v0function PictureLoad()51Testing软件测试网V9F,e5km M7|!L0Q
{51Testing软件测试网b*N5k
|u,hM K
document.all('mainpic').src = arraySrc[picNameCounter].toString();
G+MmQ4Q}Up0 document.all('mainpic').title = arrayAlt[picNameCounter].toString();
Es g1ri:zKAdwx0 document.all('pictureDescption').innerText = "图片新闻:" + arrayAlt[picNameCounter].toString() + "(点击图片查看放大效果)";
~V/x(L*t
O
`+B0 picNameCounter = picNameCounter + 1;51Testing软件测试网P)?6y&^-X.CXY b
if (picNameCounter > 9 ||picNameCounter > arraySrc.length - 1)
8A)v.] q8rH T2H0 {51Testing软件测试网1SPt e2J
picNameCounter = 0;51Testing软件测试网~ H2cw x*W
}
4a+Cx)J'j y0}
@Z)Y0L6cm#{0function showFull()51Testing软件测试网c:Z#CnemP
{51Testing软件测试网_1Pt#B8s,TfK3m }
var newWin = window.open();
A$Lt:M.R0 newWin.document.write("<img src="+ newWin.opener.mainpic.src +" title="+ newWin.opener.mainpic.title +" width=100% height = 100%>");
9X6J
u }:A5s2y:b%J)o0 newWin.document.close();
g
~7e p#J ? rN0M/B L3F0}
t ]Gm5x
N/n0//-->
1n|eq9@s0</scrīpt>
(r*}LKq*E {_0</HEAD>51Testing软件测试网S"X J;E)h+i(t {k+N)@4LL
<BODY>
g/pU2mDQ*IQ9X0<table width="100%" height="224" border="0" cellpadding="0" cellspacing="0">51Testing软件测试网 [j+a'Ve$u\
<tr>
"iO$a} n6N t0 <td height="0.5px" colspan="3" bgcolor=<%=bgColor%>> </td>
j^ e4C&};FS y0 </tr>51Testing软件测试网 u5D7]T1M[M
<tr>51Testing软件测试网 {[!r1iO)Z
M7|
<td height="6" bordercolor="#000000" >51Testing软件测试网*~$x.?)~O {
<!------------------图片切换部分------------------>
z'amjT0 <img name = "mainpic" src = <%=defaultPicture%> width = "280" height="186" ōnclick = "showFull();" title=<%=defaultDescrīption%>>
,`2h gx+CMzc G%V H0 <td width="1%" bgcolor=<%=bgColor%>></td>
1w9\8m$N
c-@0 <td width="65%" bordercolor="#000000" bgcolor = "#FFFFFF">
-n gT2VS z0 <!------------------文字新闻部分------------------>
/Qn%b8LB9?S1v8C R0 <scrīpt language="javascrīpt" src="owen.asp?n=7"></scrīpt>
U.wO#S"o8YQV }0 </td>
$VAP&LqK;A_+eY0 </tr>51Testing软件测试网.XN(Q6cW\m'F M7U
<tr>
~I/YYX7v0 <td colspan="3">51Testing软件测试网5ej+p*wl @/q-[t l
<table>
#QU9]c{0 <tr>51Testing软件测试网.\ ^%qHZp&~7Ru
<td align="left" width = 88%><font size = 2px><a name = "pictureDescption" ><%=defaultDescrīption%></a></font></td>51Testing软件测试网1}ENS+M:m3l
?:]vrU
<td align="right"><a href = "default_all.asp" target = "_blank"><font size = 2px>更多新闻...</font></a></td>
IPjb+p;\x0 </tr>51Testing软件测试网4DW4n9xj O
</table>
@"eW ~+CI pN0 51Testing软件测试网Y$X `,SH ~p&L;N{e
</td>
0b o5{
Ju$C1j2C!iO0 </tr>51Testing软件测试网sIQn$M/zS~9v3BY
<tr>
-^8al7f r:j0 <td height="0.5px" colspan="3" bgcolor=<%=bgColor%>> </td>
LIT'TVDS0 </tr> 51Testing软件测试网 Dd.E/m f*u m]
</table>51Testing软件测试网c6n{/i N-U
<scrīpt language = javascrīpt>Initialize();</scrīpt>
FID5k.]'i$` @0Vr0</BODY>51Testing软件测试网&Lt9D0J7B$A u
</HTML>
P^)?(b4G0============================================================================
{ec ~5A]'o}9X?0loadpicturesource.asp51Testing软件测试网n$\!xYbt
J
============================================================================51Testing软件测试网#xN3WyD_ JT:@T
<!--#include file="conn.asp"-->51Testing软件测试网x~xw v h
<%
2v_#o"cE0I0Response.CharSet = "gb2312"
-P d ` fy,?0Dim PictureSrc,PictureAlt,returnValue51Testing软件测试网]d^q9C L |
PictureSrc = request("PictureSrc")
n7H
I$o RZ3W|I0PictureAlt = request("PictureAlt")51Testing软件测试网X1MgoA,C.[
If PictureSrc <> "" Then51Testing软件测试网_&Tn W/R#U p7z
'加载图片地址
w z%yv*e)At.L0 set rs=server.createobject("adodb.recordset")
:} p$R#AEO+FU'\0 rs.open "select * from PictureSet where picName='首页图片' order by updateDate desc",conn,3,3
c W K \(O0 for i=1 to rs.recordcount
/FzJ4~q%l kn0 if i=1 then
m7}9N&j!c6X&] Z0 returnValue=rs("PicPath")51Testing软件测试网g"n5?BX:w
else
+b:c"Saj] kqjS0 returnValue=returnValue&"|"&rs("PicPath")51Testing软件测试网d ^9~W
dc`6Q6| S l
end if
V j*Z&d b,m} Y$[0 rs.movenext
DH|R:g"vNp0 Next51Testing软件测试网.DM9?w C.{8S L l4Ub
Elseif PictureAlt <> "" Then
$XS x9?;} {
Vew0 '加载图片描述51Testing软件测试网%@ Xe [w4f's
set rs=server.createobject("adodb.recordset")51Testing软件测试网)X6A&@D|O
rs.open "select * from PictureSet where picName='首页图片' order by updateDate desc",conn,3,351Testing软件测试网 _&iJ?G4{I
for i=1 to rs.recordcount51Testing软件测试网J F4w9_9@]
if i=1 then51Testing软件测试网8b%Az"rr P9L
returnValue=rs("PicTitle")51Testing软件测试网,w%u3?3Q3ax0m]
else51Testing软件测试网,~&h&eT#s@z
returnValue=returnValue&"|"&rs("PicTitle")
+uQ KJ v Y/W%O0 end if51Testing软件测试网1W
i z8^-T3g
rs.movenext
0B A%x(Oj.Z7c0 Next
3C{4v;Ea U?0End If51Testing软件测试网 _-h\s/e*]:s2m
rs.close51Testing软件测试网9r _+D0S1k$N Y2JQ
conn.close51Testing软件测试网9S%y [ w n Fw G
Set rs = Nothing51Testing软件测试网3i _ O1Ezb:Mo
Set conn = nothing51Testing软件测试网$K o(a7Z~}
response.write returnValue
5T4},[L)zI~0%>
*m9h&`o:X'V0============================================================================
,U#MN'e m/n0conn.asp
1\H\j$q0============================================================================
Y.B)C2J%d\H6E0<%
W6S}6u2v aB u0dim conn,connstr51Testing软件测试网~ O#S9X"D D
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath(".")&"\site.MDB;Persist Security Info=False"
!|&|:bVA e0Set conn=Server.CreateObject("ADODB.CONNECTION")51Testing软件测试网0Jvp VD J/IF'l
conn.open connstr
/p)o&EBw h)v _0%>
W,Du,wp mo[sh0============================================================================51Testing软件测试网^5O;TV&\Z0[
site.MDB51Testing软件测试网4G6\} H9G D
============================================================================51Testing软件测试网V;D@ @*Y0|@
create table PictureSet51Testing软件测试网+@\#X
~ saN
(51Testing软件测试网 oykG.kL
I7@k
id int identity,
YM"\Ls/D0 picName varchar(20),
"n'G)s2S_Z0 picPath varchar(50),
;z ]v$g\ P&g0 picTitle varchar(50),51Testing软件测试网/B$u N1QH,}x(K }[
updateDate datetime
M;oIb4C gM`0)51Testing软件测试网i LJF} I
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_1.jpg','图片说明','2006-06-17')51Testing软件测试网*^,f|B^ B(LBy%D
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_2.jpg','图片说明','2006-06-17')51Testing软件测试网#D+R v3tm+Z!| r
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_3.jpg','图片说明','2006-06-17')
8Sfg k8|,D0insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_4.jpg','图片说明','2006-06-17')51Testing软件测试网]Z)dW Sx O&P:N R
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_5.jpg','图片说明','2006-06-17')
51Testing软件测试网z-Z,_ L*q
相关阅读:
- 避免asp的SQL的执行效率低 (紫忧, 2007-7-03)
- asp与存储过程 (紫忧, 2007-7-11)
- ASP 编程中20个非常有用的例子 (紫忧, 2007-7-19)
- Vista系统配置IIS7+Asp+Access (云层, 2007-8-15)
- 利用Adodb.Stream制作彩色验证码 (紫忧, 2007-8-15)
- adodb.stream对象的方法/属性 (紫忧, 2007-8-17)
- 过滤网址的非法字符串 (紫忧, 2007-8-21)
- 在静态网页中增加访问计数器的方法 (紫忧, 2007-8-27)
- 如何用asp编写网站数据采集程序 (紫忧, 2007-8-28)
- 使用模板实现ASP代码与页面分离 (紫忧, 2007-9-03)
TAG: ASP
标题搜索
日历
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 1 | 2 | 3 | 4 | ||||||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 | |||
| 12 | 13 | 14 | 15 | 16 | 17 | 18 | |||
| 19 | 20 | 21 | 22 | 23 | 24 | 25 | |||
| 26 | 27 | 28 | 29 | 30 | 31 | ||||
我的存档
数据统计
- 访问量: 34246
- 日志数: 65
- 图片数: 4
- 建立时间: 2006-12-06
- 更新时间: 2008-09-10
