Question

我的页面上实际上有一个标题横幅，每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

任何人都可以给我任何可能与此代码设置一起使用的解决方案吗？

Answer 1

所以这就是我现在使用的解决方案。我已经完全删除了ajax和asp.net控件，而是使用了jQuery循环http://jquery.malsup.com/cycle/的html，感谢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>

如何在asp上创建动画：图像控制？

1 个答案: