我需要创建一个ASP.Net MVC 4页面,其中间有一个大图像,按钮指向下一个或上一个图像。
我想要图像的平滑过渡(无刷新)
图像是否应该用ajax或动作链接替换部分视图?
像这样:
<img src="@Url.Action("GetCurrentSlideImage") " />
答案 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>