如何使用Jquery每隔几秒循环一次css背景图像?
我想每隔几秒更改一个标题css背景图像,所以它看起来像幻灯片。
例如,前2秒是:
body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}
接下来2秒钟:
body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}
接下来2秒钟:
body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}
然后再循环到header1。
如果有人知道如何以褪色效果进行过渡,那么它将是完美的。
现在随着褪色
试试这个:
var currentBackground = 0; var backgrounds = []; backgrounds[0] = '../images/header1.jpg'; backgrounds[1] = '../images/header2.jpg'; backgrounds[2] = '../images/header3.jpg'; function changeBackground() { currentBackground++; if(currentBackground > 2) currentBackground = 0; $('body#home h1#siteH1').fadeOut(100,function() { $('body#home h1#siteH1').css({ 'background-image' : "url('" + backgrounds[currentBackground] + "')" }); $('body#home h1#siteH1').fadeIn(100); }); setTimeout(changeBackground, 2000); } $(document).ready(function() { setTimeout(changeBackground, 2000); });
签出队列function:
jQuery队列
晚到了派对,但这就是我刚才提出的类似要求。
Hello World