利用Javascript实现新闻图片的灯片效果，并进一步创新到与数据库连接

声明：如f需转载，请注明来自技佳工作室（Tech-Best) jxnuxg.blogs.com

以下代码放在head中
<script language="JavaScript">
<!--
function objSP_Article()
{
this.ImgUrl=""; this.LinkUrl=""; this.Title="";
}
function SlidePic_Article(_id)
{
 this.ID=_id;
 this.Width=0;
 this.Height=0;
 this.TimeOut=5000;
 this.Effect=23;
 this.TitleLen=0;
 this.PicNum=-1;
 this.Img=null;
 this.Url=null;
 this.Title=null;
 this.AllPic=new Array();
 this.Add=SlidePic_Article_Add;
 this.Show=SlidePic_Article_Show;
 this.LoopShow=SlidePic_Article_LoopShow;
 }
function SlidePic_Article_Add(_SP)
{
this.AllPic[this.AllPic.length] = _SP;
}
function SlidePic_Article_Show()
{
  if(this.AllPic[0] == null)
  return false;
  document.write("<div align='center'><a id='Url_" + this.ID + "' href='' target='_blank' ><img id='Img_" + this.ID + "' style='width:" + this.Width + "; height:" + this.Height + "; filter: revealTrans(duration=2,transition=23);' src='javascript:null' border='0' ></a>");  
  if(this.TitleLen != 0)
  document.write("<br><span id='Title_" + this.ID + "'></span></div>");
  this.Img = document.getElementById("Img_" + this.ID);
  this.Url = document.getElementById("Url_" + this.ID);
  this.Title = document.getElementById("Title_" + this.ID);
  this.LoopShow();
}
function SlidePic_Article_LoopShow() {
  if(this.PicNum<this.AllPic.length-1)
  this.PicNum++ ;
  else
  this.PicNum=0;
  this.Img.filters.revealTrans.Transition=this.Effect;
  this.Img.filters.revealTrans.apply();
  this.Img.src=this.AllPic[this.PicNum].ImgUrl;
  this.Img.filters.revealTrans.play();
  this.Url.href=this.AllPic[this.PicNum].LinkUrl;
  if(this.Title) this.Title.innerHTML="<a href="+this.AllPic[this.PicNum].LinkUrl+" target=_blank>"+this.AllPic[this.PicNum].Title+"</a>";
  this.Img.timer=setTimeout(this.ID+".LoopShow()",this.TimeOut);
}
//-->
</script>

以下代码放在body中
<script language="JavaScript">
var SlidePic = new SlidePic_Article("SlidePic");
SlidePic.Width    = 158;   //控制图片宽度
SlidePic.Height   = 128;  //控制图片高度
SlidePic.TimeOut  = 5000;  /
SlidePic.Effect   = 23;
SlidePic.TitleLen = 24;
var oSP = new objSP_Article();
oSP.ImgUrl         = "001.jpg";   //图片的相对路径
oSP.LinkUrl        = "NewsShow.aspx?logID=543&cateID=6";
oSP.Title         = "我校“五一”国际劳动节升国旗";
SlidePic.Add(oSP);
var oSP = new objSP_Article();
oSP.ImgUrl         = "002.jpg";
oSP.LinkUrl        = "NewsShow.aspx?logID=543&cateID=6";
oSP.Title         = "2006年学生工作总结大会举行";
SlidePic.Add(oSP);
var oSP = new objSP_Article();
oSP.ImgUrl         = "003.jpg";
oSP.LinkUrl        = "NewsShow.aspx?logID=543&cateID=6";
oSP.Title         = "教育部领导来我院检查迎评工作";
SlidePic.Add(oSP);
SlidePic.Show();  
</script>

创新：与数据库连接（本代码在asp.net中实现）
//先声明两个局变量
string s1="";
string s="";
public void GetPicNews() 
  {
   SqlDataReader sdr;
   sdr = bllArticle.GetImgInfo();
   
 　string str;
    str = "<script language=javascript>";
    str+="var SlidePic = new SlidePic_Article(\"SlidePic\");";
    str+="SlidePic.Width = 220;";
    str+="SlidePic.Height = 180;";
    str+="SlidePic.TimeOut = 5000;";
    str+="SlidePic.Effect = 23;";
    str+="SlidePic.TitleLen = 24;";
   while(sdr.Read())   //循环读取数据库中的数据
   {
    string str1="";
    str1+="var oSP = new objSP_Article();";
    str1+="oSP.ImgUrl = "+"\"/"+sdr["NewsImageLoad"]+"\""+";";
    str1+="oSP.LinkUrl = \"NewsShow.aspx?id="+sdr["ArticleID"]+"\""+";";
    str1+="oSP.Title="+"\""+sdr["ArticleTitle"]+"\""+";";
    str1+="SlidePic.Add(oSP);";
    s1+=str1;
   }
   s+=str;
   s+=s1;
   s+="SlidePic_284.Show();";
   s+="</script>";
   Instal.InnerHtml = s;
  }