未捕获的引用错误：$未定义错误

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>

Answer 2

确保您运行的是当前版本的jquery。 将其包括在头部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

如果你在chrome右键单击，检查元素，控制台，错误，请检查控制台日志是否有错误。

代码对我来说很好，也可以。

Answer 3

嗯你需要先确保所有东西都装满了才能做到

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

}

这意味着在dom完成加载所有脚本之后，它将执行您的函数的时间。