Question

我在网页中创建了一个图片元素。我从数据库中提取图像网址，并希望将图像元素的网址设置为这些值，每个间隔为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);
}

通过上面的代码，我只能为我从数据库获得的第一个值设置图片网址。

Answer 1

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

Answer 2

您所描述的内容与客户端服务器非常相似，它使用来自服务器的“推送逻辑”，使用完整的永久通信。这是不可能在网上工作。最后，在页面处理期间使用睡眠事件，除非有某些特定原因（即等待特定资源可用），否则它并不总是一个好主意。即使使用ajax更新面板，它也始终是触发事件的客户端，通向服务器。

要制作幻灯片，你有很多选择，我会告诉你两个，但你也可以使用现成的插件，网上有很多例子，只是搜索它们。

1-快速而肮脏的解决方案，但希望能获得少量图像。您可以根据数据库内容创建一个javascript数组，并将其用作为简单幻灯片javascript静态创建的数组，并让它通过SetInterval js函数进行更改。

c＃code：

//
// ... 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方法从c＃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 code：

[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。

动态更改图片网址

2 个答案: