如何在 asp:Image 控件上创建动画？答案

【问题标题】：How to create animation on asp:Image control?如何在 asp:Image 控件上创建动画？
【发布时间】：2014-05-26 15:54:12
【问题描述】：

实际上，我的页面上有一个标题横幅，它每 9 秒随机更改一次。但变化发生在一瞬间。我想在横幅图像更改时添加淡入淡出动画效果或任何平滑效果。

我有下面的 asp.net 代码用于此目的-

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:Timer ID="Timer1" runat="server" Interval="9000" Enabled="True"></asp:Timer>
    <asp:Image ID="Image1" runat="server" CssClass ="slider"/>
</ContentTemplate>

我的 vb 代码页有以下代码-

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        SetImageUrl()
    End If
End Sub

'Image slide show
Private Sub SetImageUrl()
    Dim _rand As New Random()
    Dim i As Integer = _rand.[Next](1, 6)
    Image1.ImageUrl = "~/images/banner/" & i.ToString() & ".jpg"
End Sub

Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    SetImageUrl()

End Sub

谁能给我任何可能适用于此代码设置的解决方案？

【问题讨论】：

从您给出的示例中，您似乎有一个每隔几秒刷新一次的图像幻灯片。在这种情况下，jQuery Cycle2 (jquery.malsup.com/cycle2) 插件会更合适。如果您想保留当前的代码设置，此链接可能会为您提供解决方案：msdn.microsoft.com/en-us/library/vstudio/…
你是对的！好的，我会试一试，看看效果如何。
@TasosK。 Cycle2 看起来非常好。但我不确定如何随机化该幻灯片！他们拥有的所有演示都井井有条。 cycle2 对我来说是一个很好的解决方案，但如果我可以在每次页面加载时随机化幻灯片。
它有一个random 属性，在这里查看jquery.malsup.com/cycle2/api
谢谢。我使用了以前版本的循环，现在可以正常工作。

标签： jquery html css asp.net vb.net

【解决方案1】：

所以这是我现在使用的解决方案。我已经完全删除了 ajax 和 asp.net 控件，而是使用带有 jQuery 循环的 html http://jquery.malsup.com/cycle/ 感谢 TasosK 的提醒。我不知何故丢失了堆栈的实际链接，我从那里借了几行代码-

<script type="text/javascript">
$('.my-slideshow').cycle({
    fx: 'fade',
    speed: 3000,
    timeout: 1,
    startingSlide: Math.floor(Math.random() * 6), // where 6 is the slidecount
    containerResize: 0,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
        var container = $(this).parent();
        container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
        $(this).parent().css('height', $(this).height());
    }
});

<div class="my-slideshow">
<img src="images/banner/1.jpg" alt="" />
<img src="images/banner/2.jpg" alt="" />
<img src="images/banner/3.jpg" alt="" />
<img src="images/banner/4.jpg" alt="" />
<img src="images/banner/5.jpg" alt="" />
</div>

【讨论】：