0

我无法弄清楚为什么滑块的性能与此处的文档页面上的不完全相同：http: //foundation.zurb.com/docs/components/orbit.html

我们的网站在 这里：

这是代码。我认为它应该是这个最小的标记，其余的东西应该在以后添加：

      <ul data-orbit>
  <li>
    <img src="img/sliders/lightcubebeta1000.png" >
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="img/sliders/hammertime1000.png">
    <div class="orbit-caption">...</div>
  </li>
  <li>
   <img src= "img/sliders/alarmclockbeta1000.png">
    <div class="orbit-caption">...</div>
  </li>
</ul>

Javascript的初始化：

 <!-- Javascript for Orbit Image Slider -->     
<script>
        document.write('<script src=`javascripts/vendor/'
            + ('__proto__' in {} ? 'zepto' : 'jquery')
            + '.js><\/script>')
</script>

<script src= "javascripts/foundation/foundation.js"></script>
<script src= "javascripts/foundation/foundation.dropdown.js"></script>
<script src= "javascripts/foundation/foundation.section.js"></script>
<script src= "javascripts/foundation/foundation.topbar.js"></script>
<script src= "javascripts/foundation/foundation.orbit.js"></script>

<!-- Initialize Foundation -->

<script>

    $(document).foundation('orbit', {
  timer_speed: 10000,
  pause_on_hover: true,
  resume_on_mouseout: true,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true,
  container_class: 'orbit-container',
  stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning'
});

</script>

尽管我尽最大努力复制文档页面上的示例，但轨道图像滑块会同时从上到下显示所有图像，并带有项目符号和箭头。我犯了错误还是基础 4 文档中的示例有问题？

谢谢你！

4

2 回答 2

2

您似乎没有仔细遵循 Foundation 文档的Javascript 安装部分。

您至少错过了两个步骤：

  • 需要 jQuery；
  • 初始化基金会。

此外，您在问题中提供的代码与您在实际页面上的代码不同。在您使用的页面上<ul class= "data-orbit">，正确的代码是<ul data-orbit>.

这是正确设置的所有内容的演示：http: //jsbin.com/ixuluw/3/edit

于 2013-06-21T08:32:53.003 回答
0

谢谢你。事实证明，在将<ul class="data-orbit">后面更改为 <ul data-orbit>并通过更改：

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

到

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

然后它似乎可以正确加载 zepto 或 jquery 以及轨道脚本。我一定错过了更改，因为所有 javascript 文件都在新文件夹中。我一定很累了。再次感谢！

于 2013-06-21T18:07:47.513 回答