JQuery圖片庫無功能淡入淡出效果

這是一個簡單的圖片庫腳本，用於淡入淡出div與背景圖片。速度慢，工作不正常。JQuery圖片庫無功能淡入淡出效果

這樣看來，所有圖像都顯示，沒有任何動畫

這個畫廊應該淡入淡出每一個圖像到下一個

function gallery() { 
      timerp = window.setInterval(function() { 
       $('.cornerimg').fadeOut(2000); 

       if ($('.cornerimg:visible') == $('.cornerimg').last()) { 
        $('.cornerimg').first().fadeIn(2000); 
       } else { 
        $('.cornerimg').next().fadeIn(2000); 
       }; 
      }, 6000); 
     } 
}

任何想法出了什麼問題消失在一起用它？

來源

2011-06-30 Robin Knight

這裏有大量非常棒的jQuery畫廊腳本，幾乎所有腳本都有很多內置的過渡效果。爲什麼你重新發明了輪子？ – Sparky

因爲它是一個完美運行的CSS3轉換庫的備份功能 –

next()剛剛找到選擇器的下一個兄弟。它不會跟蹤你的位置。我會做一個setInterval並傳遞當前索引。例如：

function gallery() { 
     ind = 0; 
     l = $('.cornerimg').length; 
     $('.cornerimg').fadeOut(500);   

     window.setInterval(function() { 
      if (ind > 0) $('.cornerimg').eq(ind-1).fadeOut(2000); 
      if (ind == l) { 
       ind = 0; 
      } 
      $('.cornerimg').eq(ind).fadeIn(500); 
      ind++; 
     }, 2000); 
} 

$(function() { gallery() });

爲了避免元件的偏移，作爲回調添加函數到fadeOut而不是讓它們同步發生。

注意：全局變量不是一般去的最好方法，而只是給你一個想法。更好的形式是有一個函數，它自己調用setTimeout並每次傳遞遞增的ind參數。

UNTESTED。

來源

2011-06-30 14:17:40 glortho

這不完全正確。這個函數與CSS3轉換和addClass完美配合。我不明白爲什麼它在JQUery中如此糟糕。 –

對不起，用'ind-1'更新。現在試試。測試在這裏：http://jsfiddle.net/qUvxh/ – glortho

謝謝，但動畫不在循環中。親自嘗試一下。我減少了時間來加速它http://jsfiddle.net/qUvxh/1/ –

JQuery圖片庫無功能淡入淡出效果

回答

相關問題