褪色圖像循環與javascript

我有一個JavaScript文件，在圖像之間循環並淡化它們。我目前使用2張圖像，當第二張圖像變淡時，而不是第一張圖像再次出現，我的容器空白5秒（當前超時）。但是，當圖像再次循環時，容器不是空白的。褪色圖像循環與javascript

Javascript代碼：

function thebackground() 
{ 
    $('div.contain img').css(
    { 
     opacity: 0.0 
    }); 
    $('div.contain img:first').css(
    { 
     opacity: 1.0 
    }); 
    setInterval('change()', 5000); 
} 

function change() 
{ 
    var current = ($('div.contain img.show') ? $('div.contain img.show') : $('div.contain img:first')); 
    if (current.length == 0) current = $('div.contain img:first'); 
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.contain img:first') : current.next()) : $('div.contain img:first')); 
    next.css(
    { 
     opacity: 0.0 
    }) 
     .addClass('show') 
     .animate(
     { 
      opacity: 1.0 
     }, 1000); 
    current.animate(
    { 
     opacity: 0.0 
    }, 1000) 
     .removeClass('show'); 
}; 

$(document).ready(function() 
{ 
    thebackground(); 
    $('div.contain').fadeIn(1000); // works for all the browsers other than IE 
    $('div.contain img').fadeIn(1000); // IE tweak 
});

來源

2013-11-26 Jeff P.

我想我發現的主要問題是包裝的變化功能在setInterval的，且它包裝成一個字符串不。我也想包住整個腳本的.ready()內以及

setInterval(function() {change()}, 3000);

這裏是my example，如果你想嘗試。我希望這回答了你的問題！ :-)

來源

2013-11-26 14:06:26

非常感謝！這正是我想要的，非常感激！ –

褪色圖像循環與javascript

回答

相關問題