循环遍历 Javascript 数组的索引时重置变量
Reset variable when cycling through index of a Javascript array
我正在尝试使用 javascript/jQuery 创建背景图像 'slider'。这个想法是单击一个锚点并分别向前或向后移动图像。我的文件名在一个名为 'images.'
的数组中
它有效,除了我想不出如何将最后一张图片转换回第一张图片,反之亦然。在我的控制台中,它抛出一个未定义的变量。这是我的代码:
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);
});
我试过使用 "if (i = undefined) {i=0; console.log("works");}" 和 "if (i > arrayLength) {i=0; console.log("works");}" 这两种方法都成功生成了控制台日志,但似乎都没有重置 i。
我似乎无法在 SO 上找到类似的线程,但也许我在搜索错误的东西。任何帮助或指向正确方向的一点都会很棒。谢谢!
对于前向你可以使用模数代替
i = (i+1) % images.length
这总是 return 数组中的某些内容
对于倒退,只需检查它是否变为负数,如果是,则转到最大值
if (i < 0)
{
i = arrayLength ;
}
在您的 $('#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
函数也是如此,在迭代i
变量之前先检查images[i+1]
。
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">
在将其传递给 currentImage
之前检查 i
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);
});
我正在尝试使用 javascript/jQuery 创建背景图像 'slider'。这个想法是单击一个锚点并分别向前或向后移动图像。我的文件名在一个名为 'images.'
的数组中它有效,除了我想不出如何将最后一张图片转换回第一张图片,反之亦然。在我的控制台中,它抛出一个未定义的变量。这是我的代码:
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);
});
我试过使用 "if (i = undefined) {i=0; console.log("works");}" 和 "if (i > arrayLength) {i=0; console.log("works");}" 这两种方法都成功生成了控制台日志,但似乎都没有重置 i。
我似乎无法在 SO 上找到类似的线程,但也许我在搜索错误的东西。任何帮助或指向正确方向的一点都会很棒。谢谢!
对于前向你可以使用模数代替
i = (i+1) % images.length
这总是 return 数组中的某些内容
对于倒退,只需检查它是否变为负数,如果是,则转到最大值
if (i < 0)
{
i = arrayLength ;
}
在您的 $('#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
函数也是如此,在迭代i
变量之前先检查images[i+1]
。
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">
在将其传递给 currentImage
i
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);
});