0

我有我的 Index.cshtml 视图，由于某种原因，JQuery 很难触发 jqFancyTransitions 方法（它的行为就像不包含 jqFancyTransitions 库一样）。JavaScript正在触发。为了测试，我什$('#rotatingImages').html('blah');至看它是否会找到我的 ID 并替换它的 HTML 内容，但它没有。

我的 Firebug 控制台中确实出现 JS 错误：TypeError: $(...).jqFancyTransitions is not a function. 然而，在括号末尾键入一个点后，我得到了 jqFancyTransitions intellisense。

编辑：

jqFancyTransitions.js 库实际上是根据 Firebug 加载到浏览器中的。为了测试它，我删除了对它的引用，然后我没有看到库被加载。我将它重新添加到我的视图中，我看到了它。

这是 Index.cshtml 上的代码：

<script src="~/Scripts/jqFancyTransitions.1.8.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#rotatingImages').jqFancyTransitions({
            effect: 'wave', // wave, zipper, curtain
            width: 959, // width of panel
            height: 300, // height of panel
            strips: 20, // number of strips
            delay: 4000, // delay between images in ms
            stripDelay: 50, // delay beetwen strips in ms
            titleOpacity: 0.7, // opacity of title
            titleSpeed: 1000, // speed of title appereance in ms
            position: 'alternate', // top, bottom, alternate, curtain
            direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
            navigation: false, // prev and next navigation buttons
            links: false // show images as links
        });

        // $('#rotatingImages').html('blah'); // just for testing
    });
</script>

<div id="rotatingImages">
    <img src="Images/Background/bg1.jpg" />
    <img src="Images/Background/bg2.jpg" />
    <img src="Images/Background/bg3.jpg" />
    <img src="Images/Background/bg4.jpg" />
</div>

有什么想法吗？

4

3 回答 3

0

真的很简单。我所要做的就是将我的脚本包含在我正在使用的视图中的“脚本”部分中，即 Index.cshtml，如下所示：

@section scripts
{
    @Scripts.Render("~/bundles/fancyTransitions")
    <script type="text/javascript">
        $(document).ready(function () {
            $('#rotatingImages').jqFancyTransitions({
                effect: 'wave', // wave, zipper, curtain
                width: 959, // width of panel
                height: 300, // height of panel
                strips: 20, // number of strips
                delay: 4000, // delay between images in ms
                stripDelay: 50, // delay beetwen strips in ms
                titleOpacity: 0.7, // opacity of title
                titleSpeed: 1000, // speed of title appereance in ms
                position: 'alternate', // top, bottom, alternate, curtain
                direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
                navigation: false, // prev and next navigation buttons
                links: false // show images as links
            });
        });
    </script>
}
于 2013-05-23T21:57:57.130 回答
0

我相信您的 JavaScript 参考需要更改为

<script src="@Url.Content("~/Scripts/jqFancyTransitions.1.8.js")"></script>

对于 Razor ViewEngine，或

<script src="<%=Url.Content("~/Scripts/jqFancyTransitions.1.8.js")%>"></script>

用于 WebForms ViewEngine。

于 2013-05-23T12:48:37.403 回答
-1

我觉得你忘了在顶部链接 jQuery 库。前

<script src="~/Scripts/jqFancyTransitions.1.8.js"> </script>
于 2013-05-23T04:06:40.073 回答