平滑的图像取代ASP.Net MVC

时间:2013-08-15 06:57:09

标签: asp.net-mvc asp.net-mvc-4

我需要创建一个ASP.Net MVC 4页面,其中间有一个大图像,按钮指向下一个或上一个图像。
我想要图像的平滑过渡(无刷新) 图像是否应该用ajax或动作链接替换部分视图? 像这样:

<img src="@Url.Action("GetCurrentSlideImage") " />

1 个答案:

答案 0 :(得分:1)

你可以使用jquery插件。

例如,找到并获取jqFancyTransition插件并将其导入您的视图。

对于静态使用,您可以执行以下操作:

<div id='slideshowHolder'>
    <img src='@Url.Content("~/Images/SlideShow/1.jpg")' alt='1' />
    <img src='@Url.Content("~/Images/SlideShow/2.jpg")' alt='2' />
    <img src='@Url.Content("~/Images/SlideShow/3.jpg")' alt='3' />                
</div>

<script>
    $(document).ready( function(){
        $('#slideshowHolder').jqFancyTransitions({ 
            width: 315, height: 236, 
            effect: 'random top', 
            direction: 'random', navigation: true});
    });
</script>

对于动态使用,请通过模型将网址和图像发送到视图:

@model IEnumerable<Image>

// ...

<div id='slideshowHolder'>
    @foreach(var img in Model)
    {
        <img src='@Url.Content(img.Url)' alt='@img.Alt' />
    }
</div>