利用javascript从数据库取数据来实现CSDN首页图片的切换效果

我在网上下载了一个网站的部分源代码 ，看到里面有实现CSDN首页图片的切换效果。虽然以前看网上有许多转载的，但是里面的代码都是在js中定义一个数组来存放图片的信息，但是今天这个方法更加灵活啊！只需要以下几步即可。

1.创建sql数据库：

CREATE TABLE [dbo].[images] (

   [imageid] [int] IDENTITY (1, 1) NOT NULL ,

   [imgUrl] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,

   [imgText] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,

   [imgLink] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,

   [imgAlt] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL

) ON [PRIMARY]

2.引用外部css代码

<link href="styles/StyleSheet2.css" rel="stylesheet" type="text/css" />

3.写js代码：（不知道为什么放在一个单独的js文件不行）

    <script language="javascript" type="text/javascript"  >

    var imgWidth=248;              //图片宽

var imgHeight=200;             //图片高

var textFromHeight=21;         //焦点字框高度 (单位为px)

var textStyle="whiter";           //焦点字class style (不是连接class)

var textLinkStyle="whiter"; //焦点字连接class style

var buttonLineOn="#f60";           //button下划线on的颜色

var buttonLineOff="#000";          //button下划线off的颜色

var TimeOut=5000;              //每张图切换时间 (单位毫秒);

var imgUrl=new Array();

var imgLink=new Array();

var imgtext=new Array();

var imgAlt=new Array();

var adNum=0;

//焦点字框高度样式表 开始

document.write('<style type="text/css">');

document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');

document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');

document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');

document.write('</style>');

document.write('<div id="focuseFrom">');

//焦点字框高度样式表 结束

imgUrls="<%=imgUrl%>";//获取后台cs代码的属性

imgtexts="<%=imgtext%>";

imgLinks="<%=imgLink%>";

imgAlts="<%=imgAlt%>";

imgUrl=imgUrls.split(",");

imgtext=imgUrls.split(",");

imgLink=imgUrls.split(",");

imgAlt=imgUrls.split(",");

function changeimg(n)

{

 adNum=n;

 window.clearInterval(theTimer);

 adNum=adNum-1;

 nextAd();

}

function goUrl(){

window.open(imgLink[adNum],'_blank');

}

//NetScape开始

if (navigator.appName == "Netscape")

{

document.write('<style type="text/css">');

document.write('.buttonDiv{height:4px;width:21px;}');

document.write('</style>');

function nextAd(){

 if(adNum<(imgUrl.length-1))adNum++;

 else adNum=1;

 theTimer=setTimeout("nextAd()", TimeOut);

 document.images.imgInit.src=imgUrl[adNum];

 document.images.imgInit.alt=imgAlt[adNum];

 //document.getElementById('focustext').innerHTML=imgtext[adNum];//在图片下面显示图片的路径

 document.getElementById('imgLink').href=imgLink[adNum];

}

 document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>');

 document.write('<div id="imgTitle">');

 document.write('<div id="imgTitle_down">');

//数字按钮代码开始

for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}

//数字按钮代码结束

 document.write('</div>');

 document.write('</div>');

 document.write('</div>');

 nextAd();

}

//NetScape结束

//IE开始

else

{

var count=0;

for (i=1;i<imgUrl.length;i++) {

 if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {

  count++;

 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<