Jquery旋转木马没有实现

时间:2014-12-30 14:45:17

标签: jquery image carousel

我正在尝试使用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>

1 个答案:

答案 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。