2013-09-22 67 views
1

我爲一個網站設計了一個簡單的jquery橫幅。橫幅工作正常,但如何刷新橫幅設置的時間間隔。我已經通過各種代碼,但它不工作。請通過糾正特定時間間隔內的橫幅代碼重複來幫助我。橫幅設置間隔

CSS代碼:

.banner {-webkit-border-radius:6px; -moz-border-radius:8px; border-radius:8px; 
      -khtml-border-radius: 8px; border:#bbd9ef solid 1px; background:#f5fffa; 
      padding: 5px 0 0 20px; width: 200px; height: 110px; 
     } 
    .k, .l, .m, .n {position: relative; top: -200px; text-decoration: none; } 
    .n { font-weight: bold; color: red; } 

腳本代碼與jquery1.9.1:

$(document).ready(function() { 
     $(".banner a").hide(); 
      (function() { 
      $(".k").show().animate({top: "0"}, 3000, function() { 
       $(".l").show().animate({top: "0"},3000, function(){ 
       $(".m").show().animate({top: "0"},3000, function(){ 
        $(".n").show().animate({top: "0"},3000); 
        }); 
       }); 
      }); 
      })(); 
     }); 

的HTML代碼:

<div class="banner"> 
    <a href="#" class="k">Design banner in your ownway</a><br /> 
    <a href="#" class="l"> Get more taffic and publishers.</a><br/> 
    <a href="#" class="m">Still doubt, please do contact:</a><br/><br/> 
    <a href="#" class="n">www.freemenu.info</a> 
</div> 
+1

我讓你的問題的的jsfiddle:http://jsfiddle.net/f2JCV/ –

回答

1

使用setInterval這樣的:http://jsfiddle.net/f2JCV/1/

setInterval將不會立即執行。它在開始之前等待超時,所以我寫了一個幫助函數來立即調用它。

$(document).ready(function() { 

    // Call the fn immediately, then every interval milliseconds 
    function setIntervalNow(fn,interval) { 
     fn(); 
     return setInterval(fn, interval); 
    } 

    setIntervalNow(function() { 
     $(".banner a").hide().css('top',-200); // reset the items to the top 
      (function() { 
      $(".k").show().animate({top: "0"}, 3000, function() { 
       $(".l").show().animate({top: "0"},3000, function(){ 
       $(".m").show().animate({top: "0"},3000, function(){ 
        $(".n").show().animate({top: "0"},3000); 
        }); 
       }); 
      }); 
      })(); 
    }, 15000); // repeat every 15 seconds 
}); 
+0

提問者沒有說他需要它立即執行,是不是?爲什麼要在這種情況下經歷麻煩?無論如何,我真的很喜歡setIntervalNow函數。它提醒我一個do/while循環,除了內置的延遲。擴展JavaScript的很酷的例子! +1 – jmort253

+0

其實,是的,他做到了。他給出的例子立即執行。 –