Question

我正在使用JavaScript进行图像幻灯片演示，并且为了更好地理解代码，我将function slideshow(n)的参数更改为function slideshow(slideIndex)，但是注意到它没有用，请您帮我弄清楚函数的这两个参数有什么区别？为什么函数slideshow(slideIndex)中的第二个参数不起作用？

var slideIndex = 1;

slideshow(slideIndex);

function nextPrev(n){
    slideshow(slideIndex += n);
}

function slideshow(slideIndex){  

    // why "function slideshow(slideIndex)" stops executing after some 
    // slides, however function slideshow(n) works properly here?

    var x = document.getElementsByClassName("slide");
    var dot = document.getElementsByClassName("dot");
    if(slideIndex > x.length) slideIndex = 1;
    if(slideIndex < 1) slideIndex = x.length;
    for(var i=0; i < dot.length; i++){
        dot[i].className = dot[i].className.replace(" active", "");
    }
    for(var i = 0 ; i < x.length; i++){
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    dot[slideIndex-1].className += " active";
}

Answer 1

参数变量始终是局部变量。因此，当您使用slideIndex作为参数变量时，它会以相同的名称遮盖全局变量。

因此，当您这样做时：

if(slideIndex > x.length) slideIndex = 1;
if(slideIndex < 1) slideIndex = x.length;

它仅影响局部变量，而不影响全局变量，因此当函数返回时，这些更改不会持久。

如果函数要更新全局变量，则实际上没有充分的理由将其作为索引。

function nextPrev(n) {
  slideIndex += n;
  slideshow();
}

function slideshow() {
  var x = document.getElementsByClassName("slide");
  var dot = document.getElementsByClassName("dot");
  if (slideIndex > x.length) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = x.length;
  }
  for (var i = 0; i < dot.length; i++) {
    dot[i].className = dot[i].className.replace(" active", "");
  }
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  dot[slideIndex - 1].className += " active";
}

或者，您可以将检查slideIndex并与调用方中的数组限制进行比较的代码，并使slideshow()仅显示幻灯片而无需更新slideIndex。

function nextPrev(n) {
  var slideCount = document.getElementsByClassName("slide").length;
  slideIndex += n;
  if (slideIndex > slideCount) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = slideCount;
  }
  slideshow(slideIndex);
}

function slideshow(slideIndex) {

  var x = document.getElementsByClassName("slide");
  var dot = document.getElementsByClassName("dot");
  for (var i = 0; i < dot.length; i++) {
    dot[i].className = dot[i].className.replace(" active", "");
  }
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  dot[slideIndex - 1].className += " active";
}

此外，在使用1作为数组索引时，不要减去slideIndex，而应将其值设置为0至length-1的范围，而不是{{1 }}到1。处理数组索引时，习惯于从length开始计数。

替换函数中的参数不起作用

1 个答案: