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

【 tulaoshi.com - Web开发 】

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

linkchangeimg(''+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