2016-06-13 20 views
-4

私は自分の作品を表示できるミニギャラリーを作っています。私がしたいのは、最後の写真まで「右」ボタンの画像をクリックするたびに、最初から画像が繰り返されるということです。私はifステートメントを試しましたが、何も起こりません。ちょっとしたお手伝いをさせていただきます。ありがとうございます!無限ループ画像Javascript

$(function(){ 

var currIndex; 

//$("#header").hide(); 

$("ul li img").click(function() { 

    currIndex = $(this).parent(); 

    var selectsrc = $(this).attr("src"); 
    $("#display").attr("src", selectsrc); 

    $("#gray").slideDown(); 
    $("#white").fadeIn(); 
}); 

$("#gray").click(function(){ 
    $("#gray").slideToggle(); 
    $("#white").fadeOut(); 
}); 

$("#right").click(function(){ 

    var numOfItems = $("ul li img").length; 

    var nextIndex = currIndex.next(); 
    var nextImg = nextIndex.children("img").attr("src"); 
    $("#display").attr("src", nextImg); 
    currIndex = nextIndex; 

    if (currIndex == numOfItems-1){ 
     alert("HELLO"); 
     currIndex = 0; 
    } 

    else { 
     alert("HI"); 
     currIndex++; 
    } 


}) 



}); 
+0

'.next()':_一致する要素のセット内の各要素の直後の兄弟を取得します。セレクタが提供されている場合、そのセレクタに一致する場合にのみ次の兄弟を取得します._数字(インデックス)ではありません。 – melancia

+0

'if文を試しましたが、何も起こりません。そこにアラートがありますが、少なくともそのうちの1つが起きたか、エラーがコンソールに届いています。 –

答えて

1

私はあなたのコードを試していないが、それは、右クリック機能のように見えます...

if (currIndex == numOfItems-1){ 
    alert("HELLO"); 
    currIndex = 0; 
    } 
    else 
    { 
     alert("HI"); 
     currIndex++; 
    } 

は...

currIndex++; 

    if (currIndex >= numOfItems){ 
    currIndex = 0; 
    } 

そして、あなたの左クリックする必要があります関数はcurrIndexをインクリメントする必要があります。最初にゼロに設定する必要があります。 :-)

関連する問題