2

通过在 VS 2012 中选择新的 MVC 4 Razor 应用程序，我刚刚开始了我的第一个 MVC 应用程序（对不起，如果这是一个非常基本的问题）。

在 Home\Index.cshtml 中，我需要 5 张图片的幻灯片。只需要有限的功能，所以看起来snook.ca 示例应该可以正常工作。

我添加了我的图片如下：

<div class="fadein">
            <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" />
            <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" />
            <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" />
            <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" />
            <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" />
        </div>

在 site.css 页面中，我添加了以下内容：

.fadein { position:relative; width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

在 Index.cshtml 页面的底部（在 之后</ol>，我添加了以下内容：

<script>
$(function () {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    },
      3000);
});
</script>

当我运行该应用程序时，所有图像都会同时显示 - 遍布整个页面，一个接一个地流动。似乎该功能没有被执行。我的问题是如何让它运行？

4

0 回答 0