利用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">');
//焦点字框高度样式表 结束
相关新闻>>
- 发表评论
-
- 最新评论 更多>>