-2

我在网页中创建了一个图像元素。我正在从数据库中提取图像 url，并希望将图像元素的 url 设置为这些值，每个值间隔 5 秒。

我怎样才能做到这一点？

这是我的示例代码...

RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);
foreach (DetailsForSlideShow detail in details)
{
    imgSlideShow.Attributes["src"] = ResolveUrl(detail.GraphUrl);
    Thread.Sleep(detail.TimeInterval);
}

通过上面的代码，我只能为我从数据库获取的第一个值设置图像 url....

4

2 回答 2

0

您可以将所有图像链接加载到数据表中并将其放入会话中。然后将 ajax 更新面板和 ajax 计时器添加到您的网页。将计时器间隔设置为 5000，并在每个回调中读取 1 行表。

于 2012-11-10T15:53:50.337 回答
0

您所描述的似乎很像一个客户端-服务器，它使用扩展的永久通信从服务器“推送逻辑”。这是不可能在网络上工作的。最后，在页面处理期间使用睡眠事件并不总是一个好主意，除非有一些特定的原因（即等待特定资源可用）。即使使用 ajax 更新面板，也始终是客户端触发事件，导致服务器。

要制作幻灯片，您有很多选择，我将向您展示其中两个，但您也可以使用现成的插件，网络上有大量示例，只需搜索它们即可。

1- 一个快速而肮脏的解决方案，但希望用于少量图像。您可以基于 db 内容创建一个 javascript 数组，并像为简单的幻灯片 javascript 静态创建一样使用它，并通过 SetInterval js 函数对其进行更改。

c#代码：

//
// ... this is your code
//
RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

string script = "var myimg = new Array();\n";
int i=0;
foreach (DetailsForSlideShow detail in details)
{
  script += "myimg[" + i.ToString() + "] = \"" + ResolveUrl(detail.GraphUrl) + "\";\n";
}
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "arraykey", script, true);

网页：

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

这将呈现给网页，如下所示：

var myimg = new Array();
myimg[0] = "/path/img0.jpg";
myimg[1] = "/path/img1.jpg";
myimg[2] = "/path/img2.jpg";
[...]

您以后可以使用/循环使用 javascript：

var curimg=0;
function slideshow() {
    document.getElementById("mydiv").getElementsByTagName("img")[0].src = myimg[curimg];
    curimg++;
    if(curimg >= myimg.length) curimg=0;  //Restart from first image
}

然后开始幻灯片放映，在 html 末尾有一个脚本（或在正文中的 onload 事件）

  setTimeout(slideshow, 5000);

注意：您也可以在 c# RegisterClientScriptBlock 中生成/附加此脚本，如前所示，只需每次更改“arraykey”值。更多信息在这里：http: //msdn.microsoft.com/it-it/library/bahh2fef%28v=vs.80%29.aspx

2-更好的解决方案是使用 jquery 的 ajax 方法从 ac# web 方法获取“下一个图像”。

网页：

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

javascript代码：

function slideshow() {
  $.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: "/ajax.aspx/GetNextImage",
    dataType: "json",
    success: function (data) {
      //this changes the image on the web page
      $('#mydiv img').attr("src", data.d);

      //fires another sleep/image cycle
      setTimeout(slideshow(), 5000);
    },
    error: function (result) {
      alert(result.message);
    }
  });
}

$(document).ready(function () {
  //Kicks the slideshow
  slideshow();
});

cs代码：

[WebMethod]
public static string GetNextImage()
{
  //
  // ... this is your code
  //
  RollingScreenBAL bal = new RollingScreenBAL();
  DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

  //Someway get next image you need to display
  //So I assume you get 1 record only (from DB?)
  DetailsForSlideShow detail = details[0];

  //Last you can save last sent image name or index as per user...
  //I.e. you could use a Session variable, or move also this logic
  //to client side
  [...]

  //Send back to jquery call the image url
  return ResolveUrl(detail.GraphUrl);
}

注意：如果您缺少 jquery 是什么，请在网上搜索它，我相信它会对您使用 javascript 有很大帮助。

于 2012-11-10T22:32:46.763 回答