利用Javascript 與 VBscript 在asp中實現圖片自動切換

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、原理說明:
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
============================================================================

<%
    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%>> </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%>> </td>
   </tr>
</table>
<script language = javascript>Initialize();</script>
</BODY>
</HTML>
============================================================================
loadpicturesource.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')

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More