我正在尝试使用jquery在我的启动页面上实现轮播。 图像显示在页面上,但旋转木马未实现。 有人可以查看我的代码,看看我是否犯了错误?
在carosel中使用的图像应该是waterfall2.jpg,lake2.jpg和beach2.jpg
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css">
</head>
<title>
</title>
<body>
<div id="wrapper">
<header id="top-nav">
<ul>
<li>
<a href="Link" id="nav-faq">FAQ</a>
</li>
<li>
<a href="Link" id="nav-about">About</a>
</li>
<li>
<a href="Link" id="nav-jobs">Jobs</a>
</li>
</ul>
</header>
<div id="main-nav">
<ul>
<li>
<a href="Link" id="nav-home">Home</a>
</li>
<li>
<a href="Link" id="nav-projects">Projecs</a>
</li>
<li>
<a href="Link" id="nav-blog">Blog</a>
</li>
<li id="nav-shop-li">
<a href="Link" id="nav-shop">Shop</a>
</li>
</ul>
<div class="fade">
<div>
<img src="images/waterfall2.jpg">
</div>
<div>
<img src="images/lake2.jpg">
</div>
<div>
<img src="images/beach2.jpg">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.fade').slick({
dots: true,
infinite: true,
speed: 200,
fade: true,
slide: 'div',
cssEase: 'linear'
});
</script>
</body>
答案 0 :(得分:0)
在服务器上测试jQuery并使用像jQuery或Google这样的CDN(内容传送网络)时,您需要指定一个完整的URL。所以这个:
src="//code.jquery.com/jquery-1.11.0.min.js"
赢了工作。但是这个:
src="http://code.jquery.com/jquery-1.11.0.min.js"
威尔。第一个选项通常会失败,因为浏览器会在URL的开头插入file://
,而且您可能无法在本地使用jQuery。