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

来源:网络整理 责任编辑:栏目编辑 发表时间:2013-07-01 19:14 点击:

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

//焦点字框高度样式表 结束

 

 

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • 用C#制作屏幕捕获程序
    • .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上
    • 遍历ArrayList易犯错误
    • C#对XML操作:一个处理XML文件的类(1)
    • .NET简谈反射(动态调用)
    • 使用C#编写LED样式时钟控件
    • DataList嵌套问题 如何删除内层子DataList的记录
    • 怎样用C#实现完整文档打印功能
    • .NET简谈自定义事务资源管理器
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1