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

最新推荐文章于 2024-09-14 18:52:56 发布

weixinfu3753

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量430

点赞数 1

文章标签： javascript 数据库 class dataset function stylesheet

我在网上下载了一个网站的部分源代码，看到里面有实现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代码

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

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="http://www.knowsky.com/+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>);

nextAd();

}

//NetScape结束

//IE开始

else

{

var count=0;

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

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

count++;

} else {

break;

}

function playTran(){

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

function nextAd(){

if(adNum<count)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=imgUrl[adNum];

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

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=imgtext[adNum];//在图片下面显示路径

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

}

document.write(<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="http://www.knowsky.com/javascript:nextAd()" width=+imgWidth+ height=+imgHeight+ border=0 vspace="0" name=imgInit class="imgClass"></a><br>);

document.write(<div id="txtFrom"><span id="focustext" class="+textStyle+"></span></div>);

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

document.write( <div id="imgTitle_down"> <a class="trans"></a>);

//数字按钮代码开始

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

{

document.write(<a id="link+i+" href="javascript:changeimg(+i+)" class="button" style="cursor:hand; " title="+imgAlt[i]+" onFocus="this.blur()">+i+</a>);

}

//数字按钮代码结束

document.write(</div>);

}

//IE结束

</script>

里面重要的地方都有注释了，直接复制到你的aspx代码中即可。

注意：在<body></body>中不要<form></form>标签，直接在<div align=left>

</div>中输入上面的js代码即可。不知道为什么有form总是报imgInit错误。

4.在cs进行数据库调用：直接代码了，呵呵呵不会看不懂吧

protected void Page_Load(object sender, EventArgs e)

{