Image Jqueryとギャレー（「次へ」ボタンをクリックしてください）

Question

まず、英語は私の母国語ではないので、私の悪い文法には申し訳ありません。

とにかく、私はJquery/Javascriptを完全に新しくしています。

私はJqueryを使用してイメージスワップ効果を持つイメージギャラリーを作成しようとしています。

私が達成したいのは、サムネイルをクリックすると（No.4と言う）、メイン画像に画像No.4が表示されるということです。この問題のコードはすでに正常に書かれています。

私は「次」 - ボタンを持っている：

は今、私が達成したい別のものがあります。主画像が画像番号4を表示している場合、「次へ」ボタンをクリックすると、主画像は画像番号5を表示するはずである。ボタンには画像番号8が表示されます。

私が書いたコードを使用して、「次へ」ボタンをクリックすると、2番目の画像を示すメイン画像が表示されます。もう一度クリックすると3番目の画像が表示されますが、サムネイルをクリックした場所の次の番号は表示されません。

これは私の配列である：

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