1

我一直在努力解决我试图使用 JQuery Roundabout Carousel 来显示一些图像的问题。

在布局页面中，我有以下代码：

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Stylesheets -->
<link rel="stylesheet" href="~/Content/reset.css" />
<link rel="stylesheet" href="~/Content/styles.css" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.roundabout.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () { //Start up the Carosuel on the child page
        $('#images ul').roundabout({ //images list on the child page which uses this layout page.
            easing: 'easeOutInCirc',
            duration: 1500
        });
    });
</script>

这会在视图中调用轮播：

@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shares/_layout.cshtml"

}

        <!-- Image Slider -->
    <div id="images" class="fixed grid_12">
        <ul> 
            <li>
                <a href="info.html">
                    <img src="images/testImage.gif" alt="" />
                </a>
            </li>  
            <li>
                <a href="info.html">
                    <img src="images/testImage1.gif" alt="" />
                </a>    
            </li>  
            <li>
                <a href="info.html">
                    <img src="images/testImage2.gif" alt="" />
                </a>    
            </li> 
        </ul> 
    </div>

尽管尝试了不同版本的 jquery，但在布局页面中移动脚本的位置和顺序，我仍然无法克服这个错误。我已经在子页面的页眉、页脚中尝试了 JQuery。我已经尝试过从 1.3 到 1.7 的 JQuery 版本。

最后，当我在标准 .html 文件中尝试此操作时，一切正常。是否可能与 MVC 如何处理 jquery 有关？也许这就是 Razor 的行为方式？

关于我做错了什么以及如何解决这个问题的任何想法？

干杯，

莫

4

1 回答 1

2

尝试使用

@Url.Content("~/Scripts/jquery.roundabout.js")

在路径中使用~char 时，请始终使用Url.Content

还尝试观察浏览器的调试工具对文件的说明？例如，如果无法从服务器加载文件，您可以在 chrome 的 devtools 的网络选项卡中看到它。

于 2012-08-16T11:38:04.107 回答