2012-06-29 10 views
0

這張幻燈片演示在圖像和文本同時運行時很完美,但是當您在底部滾動時,每當您的下一張幻燈片發生變化或跳到頂部時,都會出現問題,不要爲什麼。如何停止幻燈片放映隱藏文字和圖像跳到最上面而下一張幻燈片進來?

這是參考鏈路:http://new.kingspointcap.com/home

和下面是js代碼:

/*----------Slideshow of text------------*/ 

var faderIndex = 2, //to keep track, also it will start from 1st because last value is 0 
    faders = $('.fadeTxt'); //cache, so we won't have to walk the dom every time 

function nextFade() { 

    //fade out element over 3000 milliseconds, after which call a function 
    $(faders[faderIndex]).fadeOut(6000, function() { 

     //increase the index and do a check, so we won't overflow 
     faderIndex++; 
     if (faderIndex >= faders.length) 
      faderIndex = 0; 

     //fade in the next element, after which call yourself infinitely 
     $(faders[faderIndex]).fadeIn(3000, nextFade); 
    }); 
} 
//get the ball rolling 

nextFade(); 

/*----------Slideshow of text------------*/ 

回答

2

的問題是,該fadeOut動畫與display: none;結束。在此fadeOut和下一個fadeIn之間,文檔較小,瀏覽器必須滾動。

設置width和包裝(在divid旗幟)的height,例如:

#banner { 
    ... 
    width: 100%; 
    height: 174px; 
} 

現在,它應該工作。

+0

你搖滾的人:)非常感謝你:) –

+0

不客氣。 – scessor