javascript - Uncaught ReferenceError : $ is not defined error

Question

我从教程中获取这段代码，用 javascript/jQuery 制作自动前进的幻灯片，它在 jsfiddle 中运行得非常好。但是，当我将所有内容都带入 Dreamweaver 时，它似乎就停止工作了。一切都在那里，我已经链接了所有相关文件(.js 和 .css)以及 jQuery 库。出于某种原因，尽管它根本不起作用。这是代码。

HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

这是标题

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="SlideShow.css">

Answer 1

经过快速尝试，我成功地重现了您提到的错误。如果你的函数有外部 js 文件，它依赖于其他 JS 库，你必须先加载那个库，然后依赖 JS 文件和你的函数。

例如，这是行不通的:

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

因为，JS 解释器搜索 $ before 甚至被加载和定义。

但是，这会起作用:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>