Jquery가 포함 된 이미지 갤러리 ("다음"버튼을 클릭하십시오)

Question

먼저 영어가 제 1 언어가 아니기 때문에 저의 잘못된 문법에 대해 사과드립니다.

어쨌든 Jquery/Javascript를 처음 사용했습니다.

Jquery를 사용하여 이미지 스왑 효과가있는 이미지 갤러리를 만들려고합니다.

썸네일을 클릭하면 주 이미지에 이미지 번호 4가 표시됩니다. 이미이 문제에 대한 코드를 작성했습니다.

나는 "다음"- 버튼이 있습니다

지금, 내가 달성하고자하는 또 다른 일이있다. 주 이미지에 이미지 번호 4가 표시되면 "다음"버튼을 클릭하면 주 이미지에 이미지 번호 5가 표시됩니다. 주 이미지에 이미지 번호 7이 표시되면 "다음"을 클릭하십시오. 버튼을 누르면 8 번 이미지가 표시됩니다.

작성한 코드를 사용하여 "다음"버튼을 클릭하면 주 이미지의 두 번째 이미지가 표시됩니다. 다시 클릭하면 세 번째 이미지가 표시되지만 축소판을 클릭 한 위치의 다음 번호는 표시되지 않습니다.

var bilder = ["../../images/galerie/assassin_2_01.jpg", 
       "../../images/galerie/assassin_2_02.jpg", 
       "../../images/galerie/assassin_2_03.jpg", 
       "../../images/galerie/assassin_2_04.jpg", 
       "../../images/galerie/assassin_2_05.jpg", 
       "../../images/galerie/assassin_2_06.jpg", 
       "../../images/galerie/assassin_2_07.jpg", 
       "../../images/galerie/assassin_2_08.jpg", 
       "../../images/galerie/assassin_2_09.jpg", 
       "../../images/galerie/assassin_2_10.jpg", 
       "../../images/galerie/assassin_2_11.jpg", 
       "../../images/galerie/assassin_2_12.jpg", 
       "../../images/galerie/assassin_2_13.jpg", 
       "../../images/galerie/assassin_2_14.jpg", 
       "../../images/galerie/assassin_2_15.jpg"]; 

이 내 JQuery와있다 :

이

내 배열입니다

function mainimage(nr) { 
    $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":300, complete:function() { 
     $(this).attr("src",bilder[nr]).fadeIn(500); 
    }}); 
} 
function next() { 
    if (index < bilder.length) { 
     index++; 
     mainimage(index); 
    } 
} 

그리고 이것은 내 HTML 구조입니다 : 어떤 도움을 감사 해요

<div class="mainimg"> 
    <ul> 
     <li><div><img class="img1" src="../../images/galerie/assassin_2_01.jpg" /></div></li> 
    </ul> 
     <div class="caption"> 
      <div>Assassin's Creed 2</div> 
      <div><a href="#">back/a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="next();">next</a></div> 
     </div> 
</div> 

<div class="thumbsrow"> 
    <div class="galeriethumbs"><img onclick="mainimage(0);" /></div> 
    <div class="galeriethumbs"><img onclick="mainimage(1);" /></div> 
    <div class="galeriethumbs"><img onclick="mainimage(2);" /></div> 
</div> 
<div class="thumbsrow"> 
    <div class="galeriethumbs"><img onclick="mainimage(3);" /></div> 
    <div class="galeriethumbs"><img onclick="mainimage(4);" /></div> 
    <div class="galeriethumbs"><img onclick="mainimage(5);" /></div> 
</div> 

!

Answer 1

위에서 언급했듯이 메인 이미지 기능을 사용할 때 인덱스 변수를 설정하면됩니다.

function mainimage(nr) { 
     $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":300, complete:function() { 
      $(this).attr("src",bilder[nr]).fadeIn(500); 
      index = nr; //this will set the index of the currently selected image. 
     }}); 
    } 
    function next() { 
     if (index < bilder.length) { 
      index++; 
      mainimage(index); 
     } 
    } 

Answer 2

어디에서 index 변수를 유지 관리합니까? 아마도 전화 할 때 설정해야 할 것입니다. mainimage function