Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

题目中所提到的“Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)”借鉴了服务器端动态生成JavaScript的方法，如下所述：

准备工作

1. 首先，确保你的电脑上安装了Visual Studio和SQL Server数据库管理系统。

2. 其次，在Visual Studio中创建一个名为“ImageSwitcher”的Web应用程序，然后在该应用程序中添加一个名为“Default.aspx”的主页。

3. 接下来，创建一个名为“Images”的表来存储所有要在主页上显示的图片。图片应保存在Web应用程序的“Images”文件夹下。表结构如下：

CREATE TABLE [dbo].[Images](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](50) NOT NULL,
[url] [varchar](50) NOT NULL,
CONSTRAINT [PK_Images] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

1. 填充“Images”表。在实际项目中，你可能会在运行时从相应的内容管理系统中获取图片。在这个示例中，我们将手工添加一些示例图片。

实现方式

1. 在“Default.aspx”中添加一个空的<div>元素，用来显示图片。

2. 在“Default.aspx.cs”中添加以下代码来读取“Images”表中的所有图片：

```csharp
SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter("SELECT name, url FROM Images", connection);
da.Fill(dt);
StringBuilder sb = new StringBuilder();
foreach (DataRow row in dt.Rows)
{
sb.AppendFormat("{{name:'{0}', url:'{1}'}},", row["name"].ToString(), row["url"].ToString());
}
ClientScript.RegisterClientScriptBlock(typeof(string), "images", string.Format("var images = [{0}];", sb.ToString().TrimEnd(',')), true);
}
}
```

此代码将在页面加载时使用SqlDataAdapter从SQL Server数据库中读取“Images”表中的所有图片，并将其用JSON格式存储在名为“images”的JavaScript变量中。这个JavaScript变量在接下来的步骤中用于图片切换效果。

1. 在“Default.aspx”中添加以下代码，以调用JavaScript函数$(document).ready()以及一些自定义的JavaScript代码，这些代码使用了jQuery库和前面提到的“images”变量来实现图片的自动切换效果：

```html

```

这些JavaScript代码将在页面加载完成后运行，然后每隔5秒钟就会选择一张随机图片进行显示。图片的选择是通过生成的“images”变量进行的。图片的渐进式切换效果是通过JQuery的fadeIn()和fadeOut()函数实现的。另外，“img-container”类用于设置包含图片的<div>元素的CSS样式。

示例说明

示例1：修改图片切换时间间隔

如果你想修改图片切换的时间间隔，可以修改刚才的JavaScript代码，如下所示：

$(document).ready(function () {
   setInterval(function () {
      var index = Math.floor(Math.random() * images.length); // 随机选择一张图片
      var image = images[index];
      $("#img-container").fadeOut(1000, function () { // 使用淡入淡出效果切换图片，时间为1秒
         $(this).css("background-image", "url('Images/" + image.url + "')").fadeIn(1000);
      });
   }, 10000); // 图片切换时间间隔为10秒
});

示例2：使用顺序切换效果

如果你想使用顺序切换效果，而不是随机切换效果，你可以修改JavaScript代码，如下所示：

$(document).ready(function () {
   var index = 0;
   setInterval(function () {
      var image = images[index++];
      if (index >= images.length) index = 0; // 到达最后一张图片时重新开始
      $("#img-container").fadeOut(1000, function () { // 使用淡入淡出效果切换图片，时间为1秒
         $(this).css("background-image", "url('Images/" + image.url + "')").fadeIn(1000);
      });
   }, 5000); // 图片切换时间间隔为5秒
});

这个JavaScript代码使用了一个计数器来获取图片的顺序。在切换过程中，下一张图片是按照顺序来取的。如果所有的图片都显示完毕，该代码将从第一张图片重新开始。