Non interceptée erreur de référence: $ n'est pas défini d'erreur

J'ai pris ce code à partir d'un tutoriel pour faire une auto avancement de diaporama en javascript/jQuery et ça fonctionne à merveille dans jsfiddle. Cependant, quand je mets tout dans Dreamweaver, il semble tout simplement arrêter de travailler. Tout y est, j'ai relié tous les fichiers concernés (l' .js et le .css) ainsi que la bibliothèque jQuery. Pour quelque raison que cela ne fonctionne pas du tout. Voici le code.

Le code 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>

Le CSS

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

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

Le Javascript/jQuery

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

Voici l'en-tête

<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">
Toute erreur dans la console?
veuillez inclure l'en-tête de votre Html, il doit être une source d'erreur
inclus l'en-tête
Vous ne pouvez pas appeler $ avant est définie dans la portée locale. Voir la réponse.

OriginalL'auteur Ivan P - Digital Alchemist | 2013-10-18

  1. 11

    Après essai rapide, j'ai réussi à reproduire l'erreur que vous avez mentionné. Si vous avez js externe des fichiers avec votre fonction, qui relly sur d'autres bibliothèques JS, vous devez charge de la bibliothèque à la première, et alors dépendante fichier JS avec vos fonctions.

    Par exemple, cela ne fonctionne pas:

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

    Parce que, JS interprète de recherche pour $ avant est même chargé et défini.

    Mais, cela va fonctionner:

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

    OriginalL'auteur Alan Kis

  2. 1

    Assurez-vous que vous utilisez une version à jour de jquery.
    de les inclure dans la section d'en-tête

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

    vérifier le journal de la console d'erreur si vous êtes sur chrome cliquez-droit, inspecter l'élément, la console, les erreurs.

    le code me semble bon et fonctionne aussi bien.

    la console de Chrome est de dire "non Interceptée erreur de référence: $ n'est pas défini"
    J'ai inclus la bibliothèque jQuery comme vous l'avez suggéré, mais toujours rien.

    OriginalL'auteur Sergio Wizenfeld

  3. 0

    hmmm Vous avez besoin pour vous assurer que tout est chargé en premier
    pour cela, vous pouvez faire

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

}

    Cela signifie que, après le dom fini de charger tous les scripts, c'est le temps qu'il fera exécuter votre fonction.

    OriginalL'auteur Emil Reña Enriquez