Javascript 为什么不是'；T基金会4轨道为我工作？_Javascript_Html_Css_Zurb Foundation

Javascript 为什么不是'；T基金会4轨道为我工作？

javascript html css zurb-foundation

Javascript 为什么不是'；T基金会4轨道为我工作？,javascript,html,css,zurb-foundation,Javascript,Html,Css,Zurb Foundation,我不确定为什么我的实现不起作用。我已经遵循了基金会4网站上的文档，但无法弄清楚它为什么不起作用。显示的只是改变图片在轨道中位置的光标点。另外，我有正确的css/html/js文件夹路径我的分数是这样的： <!DOCTYPE html>

我不确定为什么我的实现不起作用。我已经遵循了基金会4网站上的文档，但无法弄清楚它为什么不起作用。显示的只是改变图片在轨道中位置的光标点。另外，我有正确的css/html/js文件夹路径

我的分数是这样的：

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title> Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="foundation-4/css/normalize.css" />
  <link rel="stylesheet" href="foundation-4/css/foundation.css" />

  <script src="foundation-4/js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <nav class="top-bar">
    <ul class="left">
        <li class="name"><font color="white"><a href="vm.php">Va</a></font></li>
    </ul>
    <ul class="right">
        <li class="name"><font color="white">Home</font></li>
    </ul>
  </nav>
  <br>

<!-- ======================== ORBIT===================== -->

<div class="orbit-container"> 
   <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li class="active">
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
    <li>
      <img src="2.jpg">
      <div class="orbit-caption">IMAGE 2</div>
    </li>
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li>
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
  </ul>

  <!-- Prev/Next Arrows -->
  <a href="#" class="orbit-prev">Prev<span></span></a>
  <a href="#" class="orbit-next">Next<span></span></a>

  <!-- Slide Numbers -->
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>

  <!-- Timer and Play/Pause Button -->
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
  </div>

</div>

<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
  <li data-orbit-slide-number="1"></li>
  <li data-orbit-slide-number="2" class="active"></li>
  <li data-orbit-slide-number="3"></li>
</ol>

<!-- =======ORBIT END======= -->


    <script>
      document.write('<script src=foundation-4/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'foundation-4/js/vendor/zepto' : 'foundation-4/js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>


</body>
</html>


基金会4




主页





图3


图1


图2


图3


图1


第1页，共3页



文件。写（“”）；
文件。写入（“”）
$（document.foundation（）；

另外，这里是一个屏幕截图的错误，我在谷歌浏览器

它不会起作用，因为会有AJAX调用来获取脚本<如果你要在本地开发/测试，你将不得不使用一些类似于UBWebServer的东西。

< P> <强>编辑：基础翻转包含>P/>

<ul data-orbit="" class="orbit-slides-container">

  <div class="large-12 columns">
            <div class="orbit-container">
                <ul data-orbit>
                    <li data-orbit-slide="headline-1">
                        <h2>Headline 1</h2>
                        <h3>Subheadline</h3>
                        <p>Pellentesque habitant morbi tristique senectus.</p>
                    </li>
                    <li data-orbit-slide="headline-2">
                        <h2>Headline 2</h2>
                        <h3>Subheadline</h3>
                        <p>Pellentesque habitant morbi tristique senectus.</p>
                    </li>

                </ul>

            </div>



        </div>

REMOVE:=“class=”orbit slides container“它帮了我一把：所以它变成了：

<ul data-orbit>

<div class="row">
<div class="orbit-container"> 
   <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li class="active">
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
    <li>
      <img src="2.jpg">
      <div class="orbit-caption">IMAGE 2</div>
    </li>
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li>
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
  </ul>
</div>
</div>

“未捕获的TypeError:Object#这是因为jQuery尚未加载。请从此处下载jQuery

将此jQuery文件链接到您的网站

即使jQuery文件链接正确，也要确保它已加载到

<代码> <代码>标签加载基础JavaScript文件

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title> Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="foundation-4/css/normalize.css" />
  <link rel="stylesheet" href="foundation-4/css/foundation.css" />

<script src="LINKTO JQUERY JS FILE"></script>
  <script src="foundation-4/js/vendor/custom.modernizr.js"></script>

</head>


基金会4

编辑：

<ul data-orbit>

<div class="row">
<div class="orbit-container"> 
   <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li class="active">
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
    <li>
      <img src="2.jpg">
      <div class="orbit-caption">IMAGE 2</div>
    </li>
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li>
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
  </ul>
</div>
</div>




图3


图1


图2


图3


图1

编辑：尝试此操作

<ul data-orbit="" class="orbit-slides-container">

<div class="large-12 columns"> <div class="orbit-container"> <ul data-orbit> <li data-orbit-slide="headline-1"> <h2>Headline 1</h2> <h3>Subheadline</h3> <p>Pellentesque habitant morbi tristique senectus.</p> </li> <li data-orbit-slide="headline-2"> <h2>Headline 2</h2> <h3>Subheadline</h3> <p>Pellentesque habitant morbi tristique senectus.</p> </li> </ul> </div> </div>

标题1 副标题佩伦特式居住者莫比·特里斯蒂克·塞内特斯标题2 副标题佩伦特式居住者莫比·特里斯蒂克·塞内特斯
加载页面时，右键单击->检查元素（Google Chrome）。是否看到任何错误？这是服务器上的
foundation-4
文件夹，路径是否正确？@Teemu文件夹是本地的。路径为correct@DawoodAwan-我有很多错误，比如“加载资源失败”“请上传错误的快照。我下载了它并写入了正确的路径。虽然我不再有任何错误，但动态观察仍然不起作用。在您附加的快照中，您可以看到图像也没有显示出来。请检查图像路径图像和包含html代码的文件位于同一文件夹中。它们不在任何子文件夹中。我不知道会出现什么问题。请尝试将您的URL封装在一个井中。图像显示在列表视图中，但轨道不起作用。我目前正在使用mamp服务器来执行此操作。您的URL应该位于
localhost
上，而不是'file:\`我在本地和使用mamp服务器两种方式进行了测试。截图是在本地拍摄的，无论哪种方式，我都得到了相同的结果。