为什么Foundation 4 Orbit不适合我
Why isn't Foundation 4 Orbit working for me?
我不确定为什么我的实现不起作用。我已经遵循了 foundation 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>
另外,这是我在谷歌浏览器中遇到的错误的屏幕截图。
http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html
编辑:基础包含
<ul data-orbit="" class="orbit-slides-container">
删除: =" class="orbit-slides-container" 它为我做了诀窍: 所以它变成了:
<ul data-orbit>
"未捕获的类型错误:对象 # 这是因为 jQuery 尚未加载。从这里下载jQuery http://jquery.com/download/
将此jQuery文件链接到您的网站
即使 jQuery 文件已正确链接,也要确保它已加载到
在加载基础 JavaScript 文件之前<head></head>
标记
<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>
编辑:
<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>
编辑:试试这个
<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>
它不起作用,因为正在进行 AJAX 调用来获取脚本。
如果要在本地开发/测试,则必须使用USBWebServer之类的东西。
相关文章:
- ResolveUrl没有'我似乎不适合当链接到具有动态虚拟目录的外部javascript文件时
- 导航菜单不适合移动浏览器
- 如何解决不适合的分页输出
- Javascript返回内容/字符串;不适合UIWebView的给定宽度和高度
- javascript with()函数获胜'我不适合歌剧、Chrome或Brave
- 潜水者不适合放在他们的容器里,他们增加了像素
- 为什么Foundation 4 Orbit不适合我
- CKEditor allowerContent = true 根本不适合我
- iPad 上的 Safari 不适合纵向模式下 980 像素宽的网站
- 铬插入符号在非活动窗口中不可见 - 不适合拖放
- 幻灯片使用Jquery,图像不适合窗口
- Juicyslider 中的第一个图像不适合宽度页面
- 当移动方向从横向更改为纵向时,窗口元素不适合窗口
- 高图表:y 轴类别被推离图表区域,不适合
- 纸张波纹可防止点击容器元素并且不适合
- 内部css不'我不适合JS
- 在浏览器调整大小之前,主页上的幻灯片不适合屏幕(仅限firefox)
- 为什么AngularJS被称为不适合GUI编辑器应用程序
- 可以'我的日期选择器似乎不适合显示在某些页面上
- Onscroll功能不适合Chrome