Javascript配列のインデックスを循環するときに変数をリセットする

Question

javascript/jQueryを使用して背景画像 'スライダー'を作成しようとしています。そのアイデアは、アンカーをクリックし、画像を前後に移動することです。私は「画像」と呼ばれる配列にファイル名を持っています。

最後のイメージを最初のイメージに戻す方法と、その逆のイメージを再構成する方法はわかりません。私のコンソールでは、その変数は未定義です。 "{;（作品 "）;と、「もし（I>にarrayLength

var i = 0; 
var arrayLength = images.length - 1; 
currentImage(0); //show the first photo initially 

function currentImage(i) { 
    $('#image').css("background-image", "url(img/" + images[i] + ")"); 
    if (i > arrayLength) { 
     $('#image').css("background-image", "url(img/" + images[0] + ")"); 
     i = 0; 
     return; 
    } 
    console.log(i); 
} 

$('#prev').click(function(){ 
    i--; 
    currentImage(i); 
}); 
$('#next').click(function(){ 
    i++; 
    currentImage(i); 
}); 

私が使用して試した

---

にconsole.log I = 0}" の場合（I =未定義）"：ここに私のコードです）{i = 0; console.log（ "works"）;} "どちらの方法でもコンソールログは正常に終了しましたが、いずれの方法もiをリセットしていないようです。

似たようなスレッドが見つかりませんでしたが、間違ったものを探している可能性があります。任意のヘルプ、または正しい方向のポイントは素晴らしいでしょう。ありがとう！前進のために

Answer 1

チェックiこのことができますcurrentImage

var i = 0; 
var arrayLength = images.length - 1; 
currentImage(0); //show the first photo initially 

function currentImage(i) { 
    $('#image').css("background-image", "url(img/" + images[i] + ")"); 
} 

$('#prev').click(function(){ 
    i--; 
    if(i < 0) i = arrayLength; 
    currentImage(i); 
}); 

$('#next').click(function(){ 
    i++; 
    if(i > arrayLength) i = 0; 
    currentImage(i); 
}); 

Answer 2

あなたはこれは常にそれがマイナスになった場合、それは、その後、最大に移動しなければ、チェックだけで、後方の配列

で何かを返します代わりに

i = (i+1) % images.length 

係数を使用することができますあなたの$('#prev')と$('#next')click機能で

if (i < 0) 
{ 
    i = arrayLength ; 
} 

Answer 3

、あなたが最初にありimagesかどうかを確認反復を行う前にインデックス[i]にあるアイテムと比較します。たとえば ：あなたはi変数を反復処理する前に

$('#prev').click(function(){ 
    if(images[i-1] != undefined){ 
     i--; 
     currentImage(i); 
    }else{ 
     // do the reset here, or if you want you can show the last image in an array 
     currentImage(images.length); 
    } 
}); 

同じことが$("#next").click機能のために行く、最初images[i+1]をご確認ください。

Answer 4

var i = 0, images=["q","w","e","r","t","y"]; 
 

 
var arrayLength = images.length - 1; 
 
currentImage(0); //show the first photo initially 
 

 
function currentImage(i) { 
 
    if(i < 0) i = arrayLength; 
 
    if(i > arrayLength) i = 0; 
 
    
 
    alert(images[i]); //replace this with logic for setting image 
 
} 
 

 
$('#prev').click(function(){ 
 
    i--; 
 
    currentImage(i); 
 
}); 
 
$('#next').click(function(){ 
 
    i++; 
 
    currentImage(i); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input type="button" value="previous" id="prev"> 
 
<input type="button" value="next" id="next">