0

プログラミングはしていませんが、私は JavaScript にかなり慣れていません。私の演習は、画像を表示し、ユーザーがボタンをクリックして次/前の画像に移動できるページを作成することです。ボタンのクリック時にサーバーから次/前の画像をロードしたいので、ページはすべての画像を一度にブラウザにロードする必要はありません。

このバージョンには、次の画像に移動するためのボタンがあるだけで、jQuery または AJAX で読み込もうとしています。ページは最初の「image0」をロードし、JavaScript デバッガーは onClick イベントが実行され、期待どおりに動作することを示しますが、画像は変更されません。 

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

append別のスタック オーバーフローの例から関数を取得しました。現在の画像を置き換えたいhtml()のですが、その代わりに使用する提案を見てきappend()ましたが、例を変更する前にこれを機能させようと考えました。

.load()また、次の画像の URL だけを使用して、画像自体に関数を試しました。上記の例で両方を示そうとすると、質問を読んでいる人を混乱させる可能性が高いように見えましたが、それもうまくいきませんでした。しかし、その方法、または両方の方法でそれを解決する方法を私に示したいのであれば、それは素晴らしいことです.

4

4 に答える 4

3

現在の画像を次の画像に置き換えたい場合は、現在の画像の src を直接変更してみてください。

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  $('#currentImage').attr('src', locationString);
}
于 2012-10-08T14:19:34.160 に答える
0

$("#imageSlot").append(loadString); で試すことができますか? ?

于 2012-10-08T14:11:18.320 に答える
0

関数に対して次のようなことを試してください。

  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

  }
于 2012-10-08T14:36:58.090 に答える
0

行を次のように変更します

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

append()- 行を削除します

于 2012-10-08T14:14:05.357 に答える