-1

写真がフェードインおよびフェードアウトする画像ギャラリーを作成しようとしています。私はすでにその部分をカバーしていますが、これまでのところ、画像の URL を .aspx ページにハードコーディングしています。私はこれを望んでいません。動的にする必要があります。

 <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> リストを反復処理して画像のソースURLを置き換えるだけの(コードビハインド)をjQueryスクリプトに渡したいです。

jQueryスクリプト(疑似コード)で次のようなことをしたいだけです:

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

<%=%>サーバータグなどを使用してみましたが、役に立ちませんでした。私はたくさんのことを読みましたが、それらはすべて私が達成しようとしていることに対して過度に複雑に思えます..

4

4 に答える 4

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 によって呼び出すことができるWeb メソッドを aspx ページ (コード ビハインド) に追加できます。コード ビハインド メソッドは、画像への URL を含む文字列を JSON 形式で返します (これにより、JQuery はすぐにイテレートする方法を知ることができます)。

このスレッドを見て、aspx コード ビハインド ファイルで Web メソッドを作成する方法を理解してください。私はasp.net MVCを介してそれを行います...はるかに簡単です

jQuery 経由で ASP.NET サーバー側メソッドを呼び出す

于 2012-07-26T15:34:49.453 に答える