Question

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

当向上和向下滚动时，幻灯片放映功能似乎不会按预期增加计数器变量“i”。它会卡在某个数字上，然后返回一个错误，指出幻灯片显示图像元素为空。

我想帮助解决这个问题。如果我的问题含糊不清请告诉我。另外，我对提供的代码没有明显的答案，请访问网站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函数无法正常工作

1 个答案: