循環訪問Javascript數組的索引時重置變量

我正嘗試使用javascript/jQuery創建背景圖像「滑塊」。這個想法是點擊一個錨點並分別向前或向後移動圖像。我在名爲'圖像'的數組中有我的文件名。循環訪問Javascript數組的索引時重置變量

它的工作原理，除非我無法確定如何從最後一個圖像返回到第一個，反之亦然。在我的控制檯中拋出一個未定義的變量。這裏是我的代碼：

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); 
});

我已經嘗試使用「如果（I =未定義）{I = 0;執行console.log（」工程「）;}」和「如果（我> arrayLength ）{i = 0; console.log（「works」）;}「這兩種方法都導致了一個成功的控制檯日誌，但這兩種方法似乎都沒有重置i。

我似乎無法在SO上找到類似的線索，但也許我在尋找錯誤的東西。任何幫助或正確方向的一點都會很棒。謝謝！

來源

2017-01-14 swollenboy

希望這有助於前 - https://jsfiddle.net/2fqpbg0w/ – Developer

檢查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); 
});

來源

2017-01-14 05:41:20

我看到這是如何工作的吧。非常感謝答案！ – swollenboy

不客氣！ –

對於前鋒可以使用彈性模量，而不是

i = (i+1) % images.length

這將始終返回的東西在陣列中

爲了向下，只需檢查它是否進入負，如果這樣做，然後去到最大

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

來源

2017-01-14 05:34:48

在你$('#prev')和$('#next')click功能，請檢查您的images第一，如果有在迭代之前在[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]第一你迭代i變量之前。

來源

2017-01-14 05:36:14 dexterb

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

來源

2017-01-14 05:40:49 Developer

循環訪問Javascript數組的索引時重置變量

回答

相關問題