jQueryの：最初に1つの時間間隔をとり、その後、私は可変<strong><em>itemInterval</em></strong>によって設定された間隔で、画像間のフェードループを有する別のその後

Question

に変化するループを作成します。そのような：私は本当にループが実行された初回のみが実行されます初期時間間隔、そしてその後のたびに実行第2の時間間隔を持っている場合は、やりたい何

  // interval between items 
      var itemInterval = 5500; 

      // start loop 
      var infiniteLoop = setInterval(function() { 

       // initial fade out 
       $('.rotating-item').eq(currentItem).fadeOut(fadeTime); 

       // set counter 
       if (currentItem == numberOfItem -1) { 
        currentItem = 0; 
       } else { 
        currentItem++; 
       } 

       // next item fade in 
       $('.rotating-item').eq(currentItem).fadeIn(fadeTime); 

      }, itemInterval); 

。

ユーザーがページを開くと、最初のクロスフェードは非常に速いですが、次の画像がクロスフェードするのに時間がかかります。

私はJavascriptの新機能を使用していますので、コードを編集して機能させていただければ幸いです。お時間を事前に感謝あなたが代わりに匿名の1の正常な機能を使用して試みることができる:)

Answer 1

場合：

 // interval between items 
     var itemInterval = 5500; 
     var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way 
     setTimeout(function(){ 
       // this code will run only once, one second after the page loads. 
       myFunc(); 
       infiniteLoop = setInterval(myFunc, itemInterval); 
       // commence loop that will run forever unless you use clearinterval(infiniteLoop); 
     }, 1000); 
     // start loop 


     function myFunc() { 
      // this code will run every time the function is called 
      // initial fade out 
      $('.rotating-item').eq(currentItem).fadeOut(fadeTime); 

      // set counter 
      if (currentItem == numberOfItem -1) { 
       currentItem = 0; 
      } else { 
       currentItem++; 
      } 

      // next item fade in 
      $('.rotating-item').eq(currentItem).fadeIn(fadeTime); 

     } 

この方法では、手動でこの関数を呼び出して、それは間隔です始めることができます。

Answer 2

はこれを試してみてください：

// interval between items 
var itemInterval = 5500; 

// start loop 
var infiniteLoop = setInterval("fadeChange()", itemInterval); 

function fadeChange() { 
// initial fade out 
$('.rotating-item').eq(currentItem).fadeOut(fadeTime); 

// set counter 
if (currentItem == numberOfItem -1) { 
    currentItem = 0; 
} else { 
    currentItem++; 
} 

// next item fade in 
$('.rotating-item').eq(currentItem).fadeIn(fadeTime); 
} 

これは、最初に呼び出される関数は、すべての5,5seconds呼ばれるべき機能を回避します。