Question

我一直在乱轨（zurb-foundation）。我想自定义幻灯片，我收到一个恼人的错误： “Uncaught TypeError：Object [object Object]没有方法'orbit'” 它看起来像foundation.orbit.js脚本不是definet。另一个奇怪的事情就是在这个脚本中函数以...开头;（函数（$，window，document，undefined）是正常的';'？这是代码：

<head>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width">
    <title> - Welcome to Foundation</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="/Content/landing-page.css" rel="stylesheet">
    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script src="/Scripts/jquery.cookie.js"></script>

    <script src="/Scripts/jquery-ui-1.8.24.js"></script>

    <link href="/Content/foundation/foundation.css" rel="stylesheet">
    <link href="/Content/foundation/foundation.mvc.css" rel="stylesheet">
    <link href="/Content/foundation/app.css" rel="stylesheet">
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <meta class="foundation-data-attribute-namespace">
    <meta class="foundation-mq-xxlarge">
    <meta class="foundation-mq-xlarge">
    <meta class="foundation-mq-large">
    <meta class="foundation-mq-medium">
    <meta class="foundation-mq-small">
</head>
<body>
    <div class="row">
    <div class="large-1 columns">
    </div>
    <div class="large-10 columns large-centered">
        <section class="full-grid">
            <div id="travelled-places">
                <img class="border" src="/Content/images/landing/canada-national-park.jpg" alt="Canada National Park" title="Canada National Park" data-thumb="~/Content/images/landing/canada-national-park.jpg" style="display: block; z-index: 1;">                    
                <img class="border" src="/Content/images/landing/china-gardens.jpg" alt="China Gardens" title="China Gardens" data-thumb="~/Content/images/landing/china-gardens.jpg" style="display: none; z-index: 1;">
                <img class="border" src="/Content/images/landing/grand-canyon.jpg" alt="Grand Canyon" title="Grand Canyon" data-thumb="~/Content/images/landing/grand-canyon.jpg" style="display: none; z-index: 1;">
                <img class="border" src="/Content/images/landing/hawaii.jpg" alt="Hawaii" title="Hawaii" data-thumb="~/Content/images/landing/hawaii.jpg" style="display: none; z-index: 1;">
            </div>                
            <div class="cn-bar">
                <div class="cn-nav">
                    <a href="#" class="cn-nav-next">
                        <span>Previous</span>
                        <div style="background-image:url(/Content/images/landing/china-gardens.jpg);"></div>
                    </a>
                    <a href="#" class="cn-nav-next">
                        <span>Next</span>
                        <div style="background-image:url(/Content/images/landing/hawaii.jpg);"></div>
                    </a>
                </div>                    
            </div>
        </section>
    </div>
    <div class="large-1 columns">
    </div>
    <script src="/Scripts/fastclick.js"></script>
<script src="/Scripts/placeholder.js"></script>
    <script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
    <script>
    //$(document).foundation();
    jQuery(document).ready(function ($) {
        $('#travelled-places').orbit({
            animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 800,                // how fast animtions are
            timer: true,             // true or false to have the timer
            advanceSpeed: 4000,          // if timer is enabled, time between transitions 
            pauseOnHover: false,         // if you hover pauses the slider
            startClockOnMouseOut: false,     // if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000,     // how long after MouseOut should the timer start again
            directionalNav: true,        // manual advancing directional navs
            captions: true,              // do you want captions?
            captionAnimation: 'fade',        // fade, slideOpen, none
            captionAnimationSpeed: 800,      // if so how quickly should they animate in
            bullets: false,          // true or false to activate the bullet navigation
            bulletThumbs: false,         // thumbnails for the bullets
            bulletThumbLocation: '',         // location from this file where thumbs will be
            afterSlideChange: function () { }    // empty function 
        });
    });
</script>

有什么想法吗？

提前致谢。

Answer 1

您的代码中存在一些问题：

您需要取消注释$(document).foundation();以初始化基础插件，然后才能使用它们。
您没有正确调用orbit，而是在document上调用它，然后将data-orbit属性添加到<div id="travelled-places">元素中，如下所示：
```
$(document).foundation({
    orbit: {
        ... // your options
    }
});
```

有关详细信息，请参阅Foundations Orbit文档。

未捕获的TypeError：对象[object Object]没有方法'orbit'

1 个答案: