Ich bin ziemlich neu in JavaScript, aber nicht in der Programmierung. Meine Übung besteht darin, eine Seite zu haben, auf der ein Bild angezeigt wird und auf der der Benutzer durch Klicken auf eine Schaltfläche zum nächsten / vorherigen Bild wechseln kann. Ich möchte das nächste / vorherige Bild vom Server beim Klicken auf die Schaltfläche laden, damit die Seite nicht alle Bilder gleichzeitig in den Browser laden muss.

Diese Version hat nur eine Schaltfläche, um zum nächsten Bild zu gelangen, und ich versuche, es mit jQuery oder AJAX zu laden. Die Seite lädt das anfängliche "image0" und der JavaScript-Debugger zeigt, dass das onClick-Ereignis ausgeführt wird und das tut, was ich erwarten würde, aber das Bild ändert sich nicht.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var imageIndex = 0;
var jpgImageName = "image0"
var loadString = "images/" + jpgImageName + ".JPG";

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  var loadString = $("<img />").attr('src', locationString);
  $("imageSlot").append(loadString);
}

</script>
</head>
<body>

<div id="imageSlot">
  <img id="currentImage" src="images/image0.JPG" height="400" alt="image"+imageIndex/>
</div>
<button id="changeImage" onclick="changeImage()">Change Image</button>

</body>
</html>

Ich habe die Funktion append aus einem anderen Beispiel für einen Stapelüberlauf erhalten. Ich möchte das aktuelle Bild ersetzen und habe einen Vorschlag gesehen, dafür html() anstelle von append() zu verwenden, aber ich dachte, ich würde versuchen, dies zum Laufen zu bringen, bevor ich anfing, das Beispiel zu ändern.

Ich habe auch eine .load() -Funktion für das Bild selbst mit nur der URL für das nächste Bild ausprobiert. Das hat auch nicht funktioniert, obwohl der Versuch, beide im obigen Beispiel zu zeigen, die Leute, die die Frage lesen, wahrscheinlich verwirren würde. Aber wenn Sie mir zeigen möchten, wie ich es auf diese oder beide Arten lösen kann, wäre das großartig.

0
arcy 8 Okt. 2012 im 18:09

4 Antworten

Beste Antwort

Wenn Sie das aktuelle Bild durch das nächste ersetzen möchten, können Sie versuchen, die src des aktuellen Bildes direkt zu ändern:

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  $('#currentImage').attr('src', locationString);
}
3
Adam Pollock 8 Okt. 2012 im 14:19

Können Sie es mit $ ("# imageSlot") versuchen. Append (loadString); ?

0
Chandra Sekhar Walajapet 8 Okt. 2012 im 14:11

Versuchen Sie Folgendes für Ihre Funktion:

  function changeImage(){
      imageIndex++;
      imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
      var locationString = "images/image" + imageIndex + ".JPG";
      $('#currentImage').attr('src', locationString);//set the 'src' attribute inline

  }
0
crunchBar 8 Okt. 2012 im 20:00

Ändern Sie die Zeile in

$('img').attr('src', locationString);

Und löschen Sie die Zeile append () -

0
David 10K 8 Okt. 2012 im 14:19