他の干渉関数のためにJavascript関数が正しく機能しない

Question

javascriptに2つの関数があります。 1つは、自動スライドショー（画像の隠蔽と表示、その順序と回転速度を処理する）を管理するためのものです。もう1つはフェード効果を作成することです。フェード効果は、領域の外側にスクロールされている場合はすべての要素に適用されます。

上下にスクロールすると、スライドショー機能がカウンタ変数 '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)を追加すると、スクリプト内に新しいインスタンスが作成されるはずです。