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，您可以简单地将margin-left设置为负值，这样Image就会消失。我个人使用这个解决方案：

用户点击下一个/上一个按钮
显示加载图片（gif）
在javascript中创建图片（var img = new Image()）
为该图像设置onload动作，将旧图像向左/向右移动并附加新图像等。
下一张/上一张图片网址
分配创建的图像的src，因此当它加载时，执行onload动作。

在这种情况下，AjaxToolkit可能不是最干净的解决方案。您可能需要制作一些返回nex / prev图像网址的简单服务，但这只是几行代码......

更新后如何滑动更新面板内容

2 个答案: