未捕获的引用错误:$没有定义错误

I took this code from a tutorial to make an auto advancing slideshow in javascript/jQuery and it works wonderfully in jsfiddle. However, when I bring everything over into Dreamweaver it seems to just stop working. Everything is there, I've linked all the relevant files (the .js and the .css) as well as the jQuery library. For some reason though it won't work at all. Here's the code.

我从教程中获取了这段代码，以使javascript/jQuery中的幻灯片自动升级，并且在jsfiddle运行得非常好。然而，当我把所有东西都放到Dreamweaver中时，它似乎就停止了工作。我已经链接了所有相关的文件(.js和.css)以及jQuery库。但出于某种原因，它根本不起作用。这里的代码。

The HTML

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>

The CSS

CSS

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

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

The Javascript/jQuery

jQuery Javascript /

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

Here's the header

这里是标题

<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">

3 个解决方案

#1

After quick try, I managed to reproduce error you mentioned. If you have external js files with your function, which relly on other JS libraries, you have to load that library first, and then dependent JS file with your functions.

经过快速的尝试，我设法重现了你提到的错误。如果您的函数具有外部js文件，那么在其他js库中，您必须首先加载该库，然后使用您的函数加载从属js文件。

For example, this won't work:

例如，这行不通:

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

Because, JS interpreter search for $ before is even loaded and defined.

因为，之前对$的JS解释器搜索甚至会被加载和定义。

But, this will work:

但是,这将工作:

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

#2

Make sure you are running a current version of jquery. include this in the head section

确保运行的是当前版本的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>

check console log for error if you are on chrome right click, inspect element, console, errors.

检查控制台日志的错误如果你在chrome右键点击，检查元素，控制台，错误。

the code looks good to me and works as well.

这段代码在我看来很好，也很有效。

#3

hmmm You need to make sure everything is loaded first to do that you can do

嗯，你需要确保所有的东西都是先加载完成的

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

}

This means that after the dom finished loading all the scripts, its the time that it will execute your function.

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

#1