Question

我有3张图片 - back_about_1.jpg，back_about_2.jpg，back_about_3.jpg

我有一个div ID'ed -about - <div id="about"></div>

div的默认背景是back_about_1.jpg（通过css- background: url(../img/back_about_1.jpg) 50% 0 no-repeat fixed;background-size:cover;设置）

我想每隔5秒更改一次div的背景，在代码将背景更改为第3张图像后，我想将其圈回到第一张图像。

任何有关Jquery的帮助都是好人：）

Answer 1

假设你有类似的东西：

#about{
  background: 50% 0 no-repeat fixed;background-size:cover;
}

这样可以解决问题：

$(function(){
   //Possible images
   var images = ["img/back_about_1.jpg", "img/back_about_2.jpg", "img/back_about_3.jpg"];
   (function changeBg(index){
        $("#about").css('backgroundImage', 'url(' + images[index] +')');
        setTimeout(function(){
            changeBg((index + 1) % images.length);  //This cycles
        }, 5000);
   })(0);

});

希望这会有所帮助。干杯

Answer 2

Here's an additional JQuery solution.

要进行此设置，您需要嵌套3个具有在另一个div中声明的背景的div。像这样：

HTML

<div class="fadein">
    <div id="rotatingImage1"></div>
    <div id="rotatingImage2"></div>
    <div id="rotatingImage3"></div>
</div>

CSS

#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}

这是JQuery片段：

jQuery(document).ready(function(){ 
    $(function(){
        $('.fadein div:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut(1000)
             .next('div').fadeIn(1000)
             .end().appendTo('.fadein');}, 
          2000);
    });
});

用Jquery圈出背景图像

2 个答案: