利用Javascript 与 VBscript 在asp中实现图片自动切换

原创 2006年06月17日 13:22:00

一、原理说明:
1、利用Javascript构造一个HTTP请求向后台数据库请求图片路径和图片描述数据
2、利用返回的图片数据构造一个图片路径数组和图片描述数组
3、构造一个IMG对象
4、利用javascript的定时函数控制IMG对象的SRC属性和TITLE属性在图片路径数组和图片描述数组各元素之间切换
二、文件组成:
frontpage.asp
loadpicturesource.asp
conn.asp
site.MDB
三、详细设计:
1、客户端请求调用frontpage.asp: Http - > frontpage.asp
2、frontpage.asp调用loadpicturesource.asp获取图片数据:frontpage.asp - > loadpicturesource.asp
3、loadpicturesource.asp调用site.MDB获取数据存储:loadpicturesource.asp - > site.MDB
4、frontpage.asp利用调用返回数据构造图片路径数组和图片描述数组
5、frontpage.asp启动setInterval定时函数进行自动控制
四、文件内容:
============================================================================
frontpage.asp
============================================================================
<!--#include file="conn.asp"-->
<%
    dim rs,sSql,sOutput,defaultPicture,defaultDescription,interval
 '刷新频率
    interval =5000
 '默认图片和默认说明 
 set rs=server.CreateObject("ADODB.RecordSet")
 sSql = "select top 1 * from pictureSet where PicName = '首页图片' order by updateDate desc"
    rs.open sSql,conn,1,1
    if not rs.bof and not rs.eof then 
 
  defaultPicture = rs("PicPath")
  defaultDescription = rs("PicTiTle")
 End If
 rs.close
 conn.close
 Set rs = Nothing
 Set conn = Nothing
 defaultDescription = "图片新闻:"&defaultDescription&"(点击图片查看放大效果)"
 
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var arraySrc;
var arrayAlt;
var picNameCounter = 0;
function GetServerData(objstrName,objstrValue,serverPage)
{
 string=escape(objstrName) +"="+escape(objstrValue);
 var objXMLHTTP = null; 
 try 
 { 
  objXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP"); 
 } 
 catch(e) 
 { 
  try 
  { 
   objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  catch(e2){}
 }
 objXMLHTTP.open("POST", serverPage, false);
 objXMLHTTP.setrequestheader("content-length",string.length);
 objXMLHTTP.setrequestheader("content-type","application/x-www-form-urlencoded");
 objXMLHTTP.send(string);
 return objXMLHTTP.responseText; 
}
function Initialize()
{
 var returnSrc = GetServerData("PictureSrc","PictureSrc","LoadDisplayPicture.asp"); 
 arraySrc= returnSrc.split("|");
 var returnAlt = GetServerData("PictureAlt","PictureAlt","LoadDisplayPicture.asp");
 arrayAlt = returnAlt.split("|");
 setInterval("PictureLoad()",<%=interval%>);
}
function PictureLoad()
{
 document.all('mainpic').src = arraySrc[picNameCounter].toString();
 document.all('mainpic').title = arrayAlt[picNameCounter].toString();
 document.all('pictureDescption').innerText = "图片新闻:" + arrayAlt[picNameCounter].toString() + "(点击图片查看放大效果)"; 
 picNameCounter = picNameCounter + 1;
 if (picNameCounter > 9 ||picNameCounter > arraySrc.length -  1)
 {
  picNameCounter = 0;
 }

}
function showFull()
{
 var newWin = window.open();
 newWin.document.write("<img src="+ newWin.opener.mainpic.src +" title="+ newWin.opener.mainpic.title +" width=100% height = 100%>");
 newWin.document.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<table width="100%" height="224" border="0" cellpadding="0" cellspacing="0">
   <tr>
  <td height="0.5px" colspan="3" bgcolor=<%=bgColor%>>&nbsp;</td>
   </tr>
   <tr>
     <td height="6" bordercolor="#000000" >
    <!------------------图片切换部分------------------>
    <img name = "mainpic" src = <%=defaultPicture%> width = "280" height="186" onclick = "showFull();" title=<%=defaultDescription%>>
  <td width="1%" bgcolor=<%=bgColor%>></td>  
  <td width="65%" bordercolor="#000000" bgcolor = "#FFFFFF">
    <!------------------文字新闻部分------------------>
    <script language="javascript" src="owen.asp?n=7"></script>
  </td>                  
   </tr>
       <tr>
  <td colspan="3">
            <table>
   <tr>
    <td align="left" width = 88%><font size = 2px><a name = "pictureDescption" ><%=defaultDescription%></a></font></td>
    <td align="right"><a href = "default_all.asp" target = "_blank"><font size = 2px>更多新闻...</font></a></td>
   </tr>
            </table>
   
        </td>
      </tr>
   <tr>
  <td height="0.5px" colspan="3" bgcolor=<%=bgColor%>>&nbsp;</td>
   </tr>                
</table>
<script language = javascript>Initialize();</script>
</BODY>
</HTML>
============================================================================
loadpicturesource.asp
============================================================================
<!--#include file="conn.asp"-->
<%
Response.CharSet = "gb2312"
Dim PictureSrc,PictureAlt,returnValue
PictureSrc = request("PictureSrc")
PictureAlt = request("PictureAlt")
If PictureSrc <> "" Then
    '加载图片地址
 set rs=server.createobject("adodb.recordset")
 rs.open "select * from PictureSet where picName='首页图片' order by updateDate desc",conn,3,3
 for i=1 to rs.recordcount
  if i=1 then
   returnValue=rs("PicPath")
  else
   returnValue=returnValue&"|"&rs("PicPath")
  end if
 rs.movenext
 Next
Elseif PictureAlt <> "" Then
    '加载图片描述
 set rs=server.createobject("adodb.recordset")
 rs.open "select * from PictureSet where picName='首页图片' order by updateDate desc",conn,3,3
 for i=1 to rs.recordcount
  if i=1 then
   returnValue=rs("PicTitle")
  else
   returnValue=returnValue&"|"&rs("PicTitle")
  end if
 rs.movenext
 Next
End If
rs.close
conn.close
Set rs = Nothing
Set conn = nothing
response.write returnValue
%>
============================================================================
conn.asp
============================================================================
<%
dim conn,connstr
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath(".")&"/site.MDB;Persist Security Info=False"
Set conn=Server.CreateObject("ADODB.CONNECTION")
conn.open connstr
%>
============================================================================
site.MDB
============================================================================
create table PictureSet
(
  id int identity,
  picName varchar(20),
  picPath varchar(50),
  picTitle varchar(50),
  updateDate datetime
)
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_1.jpg','图片说明','2006-06-17')
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_2.jpg','图片说明','2006-06-17')
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_3.jpg','图片说明','2006-06-17')
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_4.jpg','图片说明','2006-06-17')
insert into PictureSet(picName,picPath,picTitle,updateDate) values('首页图片','./pictureSource/autoDisplay_5.jpg','图片说明','2006-06-17')

VBscript和javascript区别以及在哪里该用谁?

在很多论坛中看到关于VBscript和javascript到底应该使用哪个,哪个比较好的问题?  今天我来谈谈我的看法:  服务器端:  大家知道ASP支持这两中脚本语言,也就是在服...
  • Chair_
  • Chair_
  • 2014年10月31日 15:30
  • 1408

用VBSCRIPT自动输入登录信息

几日前,朋友问我能不能帮他做一个能自动输入登录信息功能的程序。了解到,他的那个程序是运行在一款叫做“夜神安卓模拟器”(OUT了,第一次知道还有这种神器)环境下的360股票APP。对于这款模拟器我不甚了...
  • cg_i
  • cg_i
  • 2016年08月19日 22:07
  • 1487

Js基础--数组应用实例(图片切换)

在前面的文章中,我们讲到了js中数组的具体操作,详见(Js对Array的各种操作总结),这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。        本文中的图片切换具体...
  • u010297791
  • u010297791
  • 2016年11月29日 15:46
  • 1187

js实现图片自动切换

*{margin:0;padding:0;list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";c...
  • wojiaohuangyu
  • wojiaohuangyu
  • 2015年10月09日 12:39
  • 1119

原生js+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 ...
  • pspgbhu
  • pspgbhu
  • 2016年05月21日 03:01
  • 5806

原生javascript实现图片自动轮播和点击轮播代码

Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{hei...
  • sinat_21206105
  • sinat_21206105
  • 2016年08月23日 09:56
  • 11791

js简易的图片自动轮播

对于图片轮播,主要
  • u010793590
  • u010793590
  • 2014年06月06日 14:00
  • 1042

自定义ViewPager实现图片自动切换

最近项目刚上线测试版,现在闲下来两天,赶紧就捣鼓了些新功能。于是乎就写了个ViewPager的图片切换器。这个功能很实用,大多APP都有用到,所以花了点时间,给以后开发储备点 成熟的资源。 先给大家...
  • u013760048
  • u013760048
  • 2015年09月23日 15:28
  • 961

【ASP】UTF-8编码的vbscript页面,调试信息的乱码问题

在被UTF-8编码的vbscript页面,在写程序的过程中,不小心写错的话,在页面的输出信息是乱码的,如下图所示: 让人无法得知错误的原因。 毕竟在vbscript最初发展的时候,UTF-...
  • yongh701
  • yongh701
  • 2016年01月18日 20:18
  • 2308

ViewPager实现每隔两秒自动切换图片

布局代码: 1 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns...
  • wonghoman
  • wonghoman
  • 2014年05月20日 07:19
  • 835
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用Javascript 与 VBscript 在asp中实现图片自动切换
举报原因:
原因补充:

(最多只允许输入30个字)