分享
 
 
 

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

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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

} 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="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>');

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

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

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)

{

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.Tables[0];

for (int i = 0; i < dt.Rows.Count; i++)

{

imgUrl += dt.Rows[i]["imgUrl"].ToString() + ",";

imgtext += dt.Rows[i]["imgText"].ToString() + ",";

imgLink += dt.Rows[i]["imgLink"].ToString() + ",";

imgAlt += dt.Rows[i]["imgAlt"].ToString() + ",";

}

}

}

测试环境:vs2005

如果看着不错对你有用麻烦顶一下啊!如果有好的建议或者好的解决方案也麻烦你共享一下,谢谢!

E-mail:teng_s2000@126.com

QQ:37210956

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有