我在網上下載了一個網站的部分源代碼 ，看到裡面有實現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('.