Nicht erfasster ReferenceError: $ ist nicht definiert

Question

Jun 11, 2013, 07:54 PM

Nicht erfasster ReferenceError: $ ist nicht definiert

Beim Versuch, einen JQuery-Image-Schieberegler zu erstellen, wird diese Fehlermeldung angezeigt.

Hier ist meine NEUE Codierung (HINWEIS, dass ich das Skript auf die Seite verschoben habe, dies wurde von Adobe vorgeschlagen.):

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

Mein Ordnerpfad zum JS-Ordner für meine Website (lokal) sieht folgendermaßen aus: C: \ Users \ Andrew \ Desktop \ GCFS \ JS

Ich bin neu in der Welt des Codierens, aber was ich versuche zu erreichen, ist ziemlich einfach. Soweit ich weiß, muss ich keine Ready-Funktion haben und das Javascript sollte automatisch laufen. Vielen Dank für Ihre Hilfe!

Aus dem Kommentar

Als ich das versuchte, schlug es auch fehl

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>