-1

我正在尝试制作一个图片淡入淡出的图片库。我已经涵盖了该部分，但到目前为止，我在我的 .aspx 页面中对图像 url 进行了硬编码。我不想要这个，我需要它是动态的。

 <script type="text/javascript">
    $(function() 
    {   var img = $("img.x");
        $(img).hide().eq(0).show();
        var cnt = img.length
        setInterval(imgRotate, 5000);
        function imgRotate() {
            $(img).eq((img.length++) % cnt).fadeOut("slow",
        function() {
            $(img).eq((img.length) % cnt).fadeIn("slow");
        });
        }
    });        
</script>
<body>
<form id="form1" runat="server">
<div>
         <img class="x" alt="Image1" src="Desert.jpg"/>
         <img class="x" alt="Image1" src="Lighthouse.jpg"/>            
</div>
</form>

这使图像淡入淡出，这很好，但正如您所见，我在本例中对图像进行了硬编码。我不能将它用于我的应用程序。

我想做的是以下内容：我想将一个List<string> （代码隐藏）传递给 jQuery 脚本，该脚本将遍历列表并替换图像的源 URL。

我只想在 jQuery 脚本（伪代码）中做这样的事情：

int counter = 0;
var img = ListFromCodeBehind[counter];
//do some fading stuff
count++;

我试过使用<%=%>服务器标签等等，但无济于事。我读过很多东西，但对于我想要实现的目标来说，它们似乎都过于复杂了。

4

4 回答 4

2

为什么每个人都强迫你使用 AJAX？无需在单独的 HTTP 请求中加载图像列表。我假设您的代码来自某个 aspx 页面。因此，您可以在此 Pages 的类中提供一个公共方法（让我们调用它GetImages()），该方法返回一个看起来像 JavaScript 数组的字符串。IE

public string GetImages()
{
    return "['Desert.jpg', 'Lighthouse.jpg']";
}

然后在您的 JavaScript 代码（也放置在此页面的 aspx 文件中）中，您可以使用经典的 ASP 语法调用页面类的公共方法：

int counter = 0;
var ListFromCodeBehind = <%= this.GetImages() %>;
var img = ListFromCodeBehind[counter];
//do some fading stuff
count++;

最终将打印：

var ListFromCodeBehind = ['Desert.jpg', 'Lighthouse.jpg'];

这就是我相信你所期望的结果。

于 2012-07-26T15:47:40.483 回答
0

您可以将Web 方法添加到可由 AJAX 调用的 aspx 页面（代码隐藏）中。您的代码背后的方法将返回一个字符串，其中包含图像的 URL，采用 JSON 格式（以便 JQuery 知道如何在开箱即用的情况下进行迭代）。

查看此线程以了解如何在 aspx 代码隐藏文件中创建 Web 方法。我会通过 asp.net MVC 来做这件事……更直接

通过 jQuery 调用 ASP.NET 服务器端方法

于 2012-07-26T15:34:49.453 回答
0 
//Controller
[HttpGet]
public JsonResult GetImageURLS() 
{
    var urls = GetUrls();
    return Json(new { urls = urls }, JsonRequest.AllowGet); 
}

//js file
$.ajax({ url : '/GetImageURLS/', success : function(e) { if (e && e.urls) {  
    var $images = $(".images");
    for (var i in e.urls) {
     $images.append('<img src="' + i.url + '" class="x" ' + ' alt="' + i.alt + '" /> ';
    }
  });

//html
<div class="images">

</div>

试试这个来初始加载图像。然后在填充图像后在它们上调用您的函数。

于 2012-07-26T15:39:34.320 回答
0

您可以使用 AJAX 并在 Javascript 中调用 Web 服务来返回您的图像列表，如下所示：

function LoadImages() {

var url;
url = "WebServices/wsImages.asmx/GetImageList"

$.ajax({
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    success: function (response) {
        var imgList = response.d;
        //Loop through image list etc.
    }
});
}
于 2012-07-26T15:41:33.660 回答