标语设置间隔 [英] banner set interval
本文介绍了标语设置间隔的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我为一个网站设计了一个简单的jquery横幅。标语工作正常,但如何按设置的时间间隔刷新标语。我已通过各种代码,但无法正常工作。请通过在特定间隔内更正横幅广告的代码重复来对我有所帮助。
I have designed a simple jquery banner for one website. The banner is working fine but how to refresh the banner with set interval. I have gone through various codes but it is not working. Please do help me by correcting the code repetition of the banner for a specific intervals.
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的脚本代码:
THE SCRIPT CODE with 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>
推荐答案
使用 setInterval
像这样: http://jsfiddle.net/f2JCV/1/
setInterval
不会立即执行。它等待超时才开始,所以我写了一个辅助函数来立即调用它。
setInterval
will not execute immediately. It waits for a timeout before it begins, so I wrote a helper function to call it immediately.
$(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
});
这篇关于标语设置间隔的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文