私はJavaScriptとプログラミング全般を扱ってから約1か月しか経っていませんが、解決策が見つからない問題に遭遇しました。だからここにいます。小さな画像をクリックして新しい「ウィンドウ」 (ページの残りの部分の上に配置された div にすぎません) でズームアップして、画像を見やすくすることができるギャラリーを作成しました。
そして、ここがトリッキーな部分です。矢印キーを押したときに画像を変更できるようにしたい。たとえば、キーボードの右矢印キーを押すと、古い画像が非表示になり、2 番目の画像がフェードインします。
矢印キーを押したときのコードは次のとおりです。
function onKeyPress(e)
{
if (e.keyCode == 37) {
lastImage.hide();
indexNum--;
$("#zoomImage img").attr('src', picSrc[indexNum]).fadeIn();
}
if (e.keyCode == 39) {
lastImage.hide();
indexNum++;
$("#zoomImage img").attr('src', picSrc[indexNum]).fadeIn();
}
}
変数のコードは次のとおりです。
lastImage = $(#zoomImage img"); //The last picture shown)
var picSrc = ["img1.png", "img2.png", "img3.png"];