자바 스크립트 이미지 갤러리 쿼리 (다음 이미지)

Question

이것은 처음 stackoverflow에, 정말 도움이되기를 바랍니다. 나는 코딩에 초보자이므로 쿼리를 간단하게 풀기를 바랍니다. 간단한 자바 스크립트 이미지 갤러리를 만들었습니다. 왼쪽 또는 오른쪽 화살표를 클릭하면 배열 목록의 다음 이미지를 보여주기 위해 반복됩니다. 또한이 목록의 특정 이미지로 바로 이동하는 빠른 링크가 있습니다. 현재 선택되어있는 이미지의 다음 이미지를 보여주기 위해 다음/뒤로 링크를 계속 이어 가도록하려면 어떻게해야합니까? 예를 들어 갤러리 이미지 3으로 점프했다면 갤러리 갤러리 이미지 4가 아니라 갤러리 갤러리 이미지 2에 다음 이미지가 표시됩니다.

아래 코드는 내 샘플 코드입니다.

도움을 주셔서 미리 감사드립니다. 여기

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

여기

내 스크립트입니다 정말 고맙습니다.

Answer 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]; 
}