Javascript 由于另一个干扰函数，函数无法正常工作

Question

我在 javascript 中获得了 2 个函数。一个是管理自动幻灯片（处理图像的隐藏和显示、它们的顺序和旋转速度）。另一种是创建淡入淡出效果，如果所有元素滚动到区域外，该效果将应用于所有元素。

上下滚动时，幻灯片功能似乎没有按预期增加计数器变量 'i'。它卡在某个数字，然后出现 returns 错误，指出幻灯片图像元素为空。

我想帮助解决这个问题。如果我的问题不明确，请告诉我。此外，我无法通过提供的代码获得明显的答案，请查看网站 www.ggraphics。byethost7.com

这是我的代码：

//Slideshow script//

'use strict';

var firstPicture = document.getElementById("1");
var picture = firstPicture;
var currentpic = picture;
var i = 1;

document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);

function rotateImages() {
      picture.className = 'slideImg2';
  
    // choose who is the next element
    if (i > document.getElementById("imgContain").childElementCount) {
      i = 1;
      picture = firstPicture;
      picture.className = 'slideImg';
    } else {
        picture = document.getElementById("imgContain").children[i-1];
        picture.className = 'slideImg';
        i++;
        
        currentpic = picture;
    }

    // show the next element
    
};

function theDomHasLoaded(e) {
  firstPicture = document.getElementById("1");
  picture = firstPicture;
  picture.className = 'slideImg';
  i = 1;

  setInterval(rotateImages, 1000);
};

//ScrollFade script//

var opacity_names = [];
var opacity_contain = [];

function getElements(item){  //item refers to the scrollbox or scrollable element that is parent to fading elements.
  var parent = document.getElementById(item.id);
  var el_overflowb = [];
  var el_overflowt = [];
  if (parent.children.length > 0) {
    for (i = 0; i < parent.childElementCount; i++) {
      var low_diff = Math.round(parent.children[i].offsetTop + parent.children[i].offsetHeight - parent.offsetHeight - parent.scrollTop);
      var high_diff = Math.round(parent.children[i].offsetTop - parent.scrollTop);
      if (low_diff > 0) {
        var temp = window.getComputedStyle(parent.children[i]).getPropertyValue("opacity");
        el_overflowb.push([parent.children[i].id, low_diff, temp]);
        if (opacity_names.indexOf(parent.children[i].id) == -1) {
          opacity_names.push(parent.children[i].id);
          opacity_contain.push(temp);
        }
      }
      
      if (high_diff < 0) {
        var temp1 = window.getComputedStyle(parent.children[i]).getPropertyValue("opacity");
        el_overflowt.push([parent.children[i].id, high_diff, temp1]);
        if (opacity_names.indexOf(parent.children[i].id) == -1) {
          opacity_names.push(parent.children[i].id);
          opacity_contain.push(temp1);
        }
      }
    }
    for (i = 0; i < el_overflowb.length; i++) {
      var h = document.getElementById(el_overflowb[i][0]).offsetHeight;
      if (el_overflowb[i][1] <= h) { 
        var pos = h - el_overflowb[i][1];
        document.getElementById(el_overflowb[i][0]).style.opacity = opacity_contain[opacity_names.indexOf(el_overflowb[i][0])] * (pos / h);
      }else{
        document.getElementById(el_overflowb[i][0]).style.opacity = 0;
      }
    }
    
    for (i = 0; i < el_overflowt.length; i++) {
      var h = document.getElementById(el_overflowt[i][0]).offsetHeight;
      if (el_overflowt[i][1] >= -h) { 
        var pos = h + el_overflowt[i][1];
        document.getElementById(el_overflowt[i][0]).style.opacity = opacity_contain[opacity_names.indexOf(el_overflowt[i][0])] * (pos / h);
      }else{
        document.getElementById(el_overflowt[i][0]).style.opacity = 0;
      }
    }
  }
}

谢谢

Answer 1

您不应该使用全局命名空间，尤其是对于像 i.

这样的变量

将 var i 添加到 function getElements(item)，这应该会在脚本中创建它的新实例。

Javascript 由于另一个干扰函数，函数无法正常工作

Javascript function not working properly because of another interfering function

html

javascript

css

image

slideshow