更新后如何滑動更新面板內容

Question

我有一個包含圖像和按鈕的更新面板。 單擊“下一幅圖像”按鈕時，圖像控件一次顯示一張圖像，單擊“上一幅圖像”按鈕時，則顯示上一張圖像。 代碼示例是這樣的

protected void btnNext_Click(..)
{
    Image1.ImageUrl=getNextImageFromDatabase();
    UpdatePanel1.Update();
}
protected void btnPrevious_Click(..)
{
    Image1.ImageUrl=getPreviousImageFromDatabase();
    UpdatePanel1.Update();
}

現在我想知道的是，單擊“下一幅圖像”時，有什么方法可以將圖像或更新面板中的任何內容向左滑動，單擊“上一幅圖像”時，也可以向右滑動？ 有什么辦法可以使用AjaxToolKit或JQuery嗎？

Answer 1

您可以使用看起來像幻燈片效果的jQuery fadeIn fadeOut方法

在此處查看示例http://api.jquery.com/promise/#example-1

Answer 2

使用Jquery，您可以簡單地將left-margin設置為負值，這樣Image就會消失。 我個人使用此解決方案：

• 用戶單擊下一步/上一頁按鈕
• 顯示加載圖像（gif）
• 在javascript中創建圖像（ var img = new Image() ）
• 為該圖像設置onload操作，以將舊圖像左右移動並追加新圖像等。
• 獲取下一個/上一個圖片網址
• 分配所創建圖像的src，因此在加載后執行onload操作。

在這種情況下，AjaxToolkit可能不是最干凈的解決方案。 您可能需要做一些簡單的服務來返回nex / prev image url，但這只是幾行代碼...