Question

我正在尝试使用javascript / jQuery创建背景图像'滑块'。想法是单击锚点并分别向前或向后移动图像。我的文件名在一个名为'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＆gt; arrayLength）{i = 0; console.log（”工作“）;}”两种方法都导致成功的控制台日志，但两种方法似乎都没有重置i。

我似乎无法在SO上找到类似的线程，但也许我正在寻找错误的东西。任何帮助，或正确方向上的一点都会很棒。谢谢！

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

$(document).ready(function() {
  // Uberfix Amount
  $(".form-amount").keyup(function() {
    var amount = $(".form-amount").val();
    $(".form-amount").val().replace(",", ".");
    alert('passed');
  });
});

Answer 2

对于转发，您可以使用模数

这将始终返回数组中的内容

对于向后，只需检查它是否为负数，如果是，则转到最大

i = (i+1) % images.length

Answer 3

在您的$('#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。

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

循环访问Javascript数组的索引时重置变量

4 个答案: