1

スタックオーバーフローはこれが初めてです。誰かが助けてくれることを本当に願っています。私はコーディングがかなり初心者なので、クエリが簡単に解決できることを願っています。シンプルな JavaScript 画像ギャラリーを作成しました。左矢印または右矢印をクリックすると、ループして配列リストの次の画像が表示されます。このリストの特定の画像にジャンプするクイックリンクもあります。現在選択されている画像から次の画像を表示するために、次/戻るリンクを取得して続行するにはどうすればよいですか? たとえば、ギャラリー画像 3 にジャンプした場合、ギャラリー画像 2 ではなく、ギャラリー画像 4 のリストに次の画像が表示されます。

以下は私のコードのサンプルです。

ご協力いただきありがとうございます。

これが私のスクリプトです：

var num=0;

imgArray = [
  ['../00_assets/gallery/work_00.jpg','Gallery', '1 of 6',],
  ['../00_assets/gallery/work_01.jpg','Gallery', '2 of 6',],
  ['../00_assets/gallery/work_02.jpg','Gallery', '3 of 6'],
  ['../00_assets/gallery/work_03.jpg','Gallery', '4 of 6'],
  ['../00_assets/gallery/work_04.jpg','Gallery', '5 of 6'],
  ['../00_assets/gallery/work_05.jpg','Gallery', '6 of 6'],
]

function slideshow(slide_num) {
  document.getElementById('mypic').src=imgArray[slide_num][0];
  document.getElementById('mypic').alt=imgArray[slide_num][1];
  document.getElementById('number').innerHTML=imgArray[slide_num][2];
}

function slideshowUp() {
  num++;
  num = num % imgArray.length;
  slideshow(num);
}

function slideshowBack() {
  num--;
  if (num < 0) {num=imgArray.length-1;}
  num = num % imgArray.length;
  slideshow(num);
}

ここに私のHTMLがあります(関係ないと思われる部分は削除しました):

  <div align="left">
    <!--  First image in array list is here  -->
    <img src="../00_assets/gallery/work_00.jpg" id="mypic" name="mypic" alt="Gallery">

        <!--  Previous link is here  -->
<a href="#" onclick="slideshowBack(); return false;"> ← </a>

        <!--  First image number is here  -->
  <div id="number">1 of 9</div>

        <!--  Next link is here  -->
<a href="#"  onclick="slideshowUp(); return false;"> → </a>

        <!--  Three quicklinks are link is here  -->
<a href="#" onclick="slideshow(0); return false;">Quicklink 1</a> | 
<a href="#" onclick="slideshow(2); return false;">Quicklink 2</a> | 
<a href="#" onclick="slideshow(4); return false;">Quicklink 3</a> |

どうもありがとう。

4

1 に答える 1

1

num現在のスライドを変更するたびに、変数を更新する必要があります。

次に、クイックリンクをクリックすると、他のメソッド (slideshowUpおよびslideshowBack) で現在のスライドが使用され、期待どおりのナビゲーションが維持されます。

言い換えると：

function slideshow(slide_num) {
    num = slide_num; // add this line
    document.getElementById('mypic').src=imgArray[slide_num][0];
    document.getElementById('mypic').alt=imgArray[slide_num][1];
    document.getElementById('number').innerHTML=imgArray[slide_num][2];
}
于 2012-10-31T15:37:21.543 に答える