如何循环css背景图像与Jquery每隔几秒？ [英] How to loop a css background image with Jquery every few seconds?

问题描述

例如，前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'）。 
}）; 
 
 
 setTimeout（changeBackground，2000）; 
} 
 
 $（document）.ready（function（）{
 setTimeout（changeBackground，2000）; 
} 
  

I would like to change a header css background image every few seconds, so its look like a slideshow.

For example first 2 seconds be:

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}

Next 2 seconds be:

body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}

Next 2 seconds be:

body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}

And then loop again to header1.

If anyone knows how to do the transition with a fading effect, then it would be simply perfect.

解决方案

Now with fade

Try this:

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);        
});

这篇关于如何循环css背景图像与Jquery每隔几秒？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！