JavaScriptスライドショーの2つのインスタンスがループしない

Question

フェードスライドショーでいくつかのdivをループするためにこのコードを実行しています。しかし、divの終わりに達すると再起動しません。私は、これを修正するために何をする必要があるのか​​分からないが、これは重複する関数名や定義と関係していると思う。

スライドショーのインスタンスが一度正常にループすると、

ご迷惑をおかけして申し訳ありません。

jQuery(document).ready(function($){ 
 
    var allBoxes = $("div.boxes").children("div"); 
 
    transitionBox(null, allBoxes.first()); 
 
}); 
 

 
function transitionBox(from, to) { 
 
    function next() { 
 
     var nextTo; 
 
     if (to.is(":last-child")) { 
 
      nextTo = to.closest(".boxes").children("div").first(); 
 
     } else { 
 
      nextTo = to.next(); 
 
     } 
 
     to.fadeIn(500, function() { 
 
      setTimeout(function() { 
 
       transitionBox(to, nextTo); 
 
      }, 30000); 
 
     }); 
 
    } 
 
    
 
    if (from) { 
 
     from.fadeOut(500, next); 
 
    } else { 
 
     next(); 
 
    } 
 
} 
 

 
jQuery(document).ready(function($){ 
 
    var allBoxes = $("div.sideboxes").children("div"); 
 
    transitionBox(null, allBoxes.first()); 
 
}); 
 

 
function transitionBox(from, to) { 
 
    function next() { 
 
     var nextTo; 
 
     if (to.is(":last-child")) { 
 
      nextTo = to.closest(".sideboxes").children("div").first(); 
 
     } else { 
 
      nextTo = to.next(); 
 
     } 
 
     to.fadeIn(500, function() { 
 
      setTimeout(function() { 
 
       transitionBox(to, nextTo); 
 
      }, 30000); 
 
     }); 
 
    } 
 
    
 
    if (from) { 
 
     from.fadeOut(500, next); 
 
    } else { 
 
     next(); 
 
    } 
 
}

Answer 1

だけtransitionBoxの第2のインスタンスのための別の名前を定義するために必要な、最終的にそれを解決しました。 。。以下を参照してください：; `正しいdiv要素を取得している

jQuery(document).ready(function($){ 
 
    var allBoxes = $("div.boxes").children("div"); 
 
    transitionBox(null, allBoxes.first()); 
 
}); 
 

 
function transitionBox(from, to) { 
 
    function next() { 
 
     var nextTo; 
 
     if (to.is(":last-child")) { 
 
      nextTo = to.closest(".boxes").children("div").first(); 
 
     } else { 
 
      nextTo = to.next(); 
 
     } 
 
     to.fadeIn(500, function() { 
 
      setTimeout(function() { 
 
       transitionBox(to, nextTo); 
 
      }, 30000); 
 
     }); 
 
    } 
 
    
 
    if (from) { 
 
     from.fadeOut(500, next); 
 
    } else { 
 
     next(); 
 
    } 
 
} 
 

 
jQuery(document).ready(function($){ 
 
    var allBoxes = $("div.sideboxes").children("div"); 
 
    transitionBox2(null, allBoxes.first()); 
 
}); 
 

 
function transitionBox2(from, to) { 
 
    function next() { 
 
     var nextTo; 
 
     if (to.is(":last-child")) { 
 
      nextTo = to.closest(".sideboxes").children("div").first(); 
 
     } else { 
 
      nextTo = to.next(); 
 
     } 
 
     to.fadeIn(500, function() { 
 
      setTimeout(function() { 
 
       transitionBox2(to, nextTo); 
 
      }, 30000); 
 
     }); 
 
    } 
 
    
 
    if (from) { 
 
     from.fadeOut(500, next); 
 
    } else { 
 
     next(); 
 
    } 
 
}