图片切换调用数据库.doc

我在网上下载了一个网站的部分源代码 ，看到里面有实现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 PRIMARY2.引用外部css代码3.写js代码：（不知道为什么放在一个单独的js文件不行） var imgWidth=248; /图片宽var imgHeight=200; /图片高var textFromHeight=21; /焦点字框高度 (单位为px)var textStyle=whiter; /焦点字class style (不是连接class)var textLinkStyle=whiter; /焦点字连接class stylevar 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();document.write(#focuseFromwidth:+(imgWidth+2)+;margin: 0px; padding:0px;height:+(imgHeight+textFromHeight)+px; overflow:hidden;);document.write(#txtFromheight:+textFromHeight+px;line-height:+textFromHeight+px;width:+imgWidth+px;overflow:hidden;);document.write(#imgTitlewidth:+imgWidth+;top:-+(textFromHeight+14)+px;height:18px);document.write();document.write();/焦点字框高度样式表 结束imgUrls=;/获取后台cs代码的属性imgtexts=;imgLinks=;imgAlts=;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(imgLinkadNum,_blank);/NetScape开始if (navigator.appName = Netscape)document.write();document.write(.buttonDivheight:4px;width:21px;);document.write();function nextAd()if(adNum(imgUrl.length-1)adNum+;else adNum=1;theTimer=setTimeout(nextAd(), TimeOut);document.images.imgInit.src=imgUrladNum;document.images.imgInit.alt=imgAltadNum; /document.getElementById(focustext).innerHTML=imgtextadNum;/在图片下面显示图片的路径document.getElementById(imgLink).href=imgLinkadNum;document.write(+imgtext1+);document.write();document.write();/数字按钮代码开始for(var i=1;iimgUrl.length;i+)document.write(+i+);/数字按钮代码结束document.write();document.write();document.write();nextAd();/NetScape结束/IE开始elsevar count=0;for (i=1;iimgUrl.length;i+) if( (imgUrli!=) & (imgLinki!=)&(imgtexti!=)&(imgAlti!=) ) count+; else break;function playTran()if (document.all) imgInit.filters.revealTrans.play(); var key=0;function nextAd()if(adNumcount)adNum+ ;else adNum=1;if( key=0 ) key=1; else if (document.all) imgInit.filters.revealTrans.Transition=23; imgInit.filters.revealTrans.apply(); playTran(); document.images.imgInit.src=imgUrladNum;document.images.imgInit.alt=imgAltadNum; document.getElementById(link+adNum).style.background=buttonLineOn;for (var i=1;i=count;i+) if (i!=adNum)document.getElementById(link+i).style.background=buttonLineOff; /focustext.innerHTML=imgtextadNum;/在图片下面显示路径theTimer=setTimeout(nextAd(), TimeOut);document.write();document.write();document.write();document.write( );/数字按钮代码开始for(var i=1;iimgUrl.length;i+) document.write(+i+);/数字按钮代码结束document.write();document.write();document.write();document.write();/IE结束里面重要的地方都有注释了，直接复制到你的aspx代码中即可。注意：在中不要标签，直接在中输入上面的js代码即可。不知道为什么有form总是报imgInit错误。4.在cs进行数据库调用：直接代码了，呵呵呵不会看不懂吧protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) bind(); public string imgUrl = , imgLink = , imgtext = , imgAlt = ; void bind() using (SqlConnection connection = new SqlConnection(server=.;database=northwind;uid=sa;pwd=123) SqlDataAdapter sda = new SqlDataAdapter(select top 5 * from images order by imageid desc, connection); DataSet ds = new DataSet(); DataTable dt = new DataTable(); sda.Fill(ds); dt = ds.Tables0; for (int i = 0; i dt.Rows.Count; i+) imgUrl += dt.RowsiimgUrl.ToString() + ,; imgtext += dt.Rowsii