7
Viene visualizzato questo messaggio di errore quando si tenta di creare un dispositivo di scorrimento immagine JQuery.
Uncaught ReferenceError:$ is not defined
Qui è il mio nuovo codice (NOTA che mi sono mosso lo script per il della pagina, questo è stato suggerito da Adobe.):
<!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"> </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"> </th>
</tr>
<tr>
<th width="5%" align="left" scope="col"> </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"> </th>
</tr>
</table>
<p> </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>
Il mio percorso cartella alla cartella JS per la mia il sito Web (localmente) è simile a questo: C: \ Users \ Andrew \ Desktop \ GCFS \ JS
Sono nuovo nel mondo della codifica, ma quello che sto cercando di ottenere è abbastanza semplice. Per quanto ne so non ho bisogno di avere una funzione pronta e il javascript dovrebbe essere eseguito automaticamente. Grazie per l'aiuto!
Da commento
Quando ho provato questo ha anche fallito
<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>
Sei sicuro che jQuery 1.10 è dove pensi che sia? – Blazemonger
sì, sto utilizzando Dreamweaver per creare questo sito, quindi il file era essenzialmente "collegato" e il codice è stato scritto per me. – MasterFuel
(1) Scopri come utilizzare il [pannello di rete] (https://developers.google.com/chrome-developer-tools/docs/network) in modo da poter vedere se c'è un errore nella richiesta di 'jquery-1.10.1 .min.js'. (2) Scopri come utilizzare la [Console] (https://developers.google.com/chrome-developer-tools/docs/console) in modo da poter seguire il consiglio di Rag. Questo sito non può aiutarti se non impari ad aiutare te stesso :) – benastan