圈背景图像使用jQuery

我有3个图像 - back_about_1.jpg，back_about_2.jpg，back_about_3.jpg圈背景图像使用jQuery

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

我默认的div背景is back_about_1.jpg（set through css- background: url(../img/back_about_1.jpg) 50% 0 no-repeat fixed;background-size:cover;）

我想每5秒更改一次该div的背景，并且在代码将背景更改为第三张图像后，我想将它圈回第一张图像。

与jQuery任何帮助将是好人:)

来源

2014-01-12 Magesh Kumaar

jQuery是JavaScript的 – chepe263

尝试的东西已经在这里 \t \t <脚本type ='text/javascript'> \t \t \t var imageID = 0; \t \t \t var aboutimg = document.getElementByID（“about”）; \t \t \t功能changeimage（every_seconds）{ \t \t \t如果（图像标识！）{ \t \t \t \t aboutimg.style.backgroundImage = “URL（IMG/back_about_1.jpg）”; \t \t \t imageID ++; \t \t \t} \t \t \t否则{如果（图像标识== 1）{ \t \t \t \t aboutimg.style.backgroundImage =“URL（IMG/back_about_2。JPG）“; \t \t \t图像标识++; \t \t \t}否则{如果（图像标识== 2）{ \t \t \t \t aboutimg.style.backgroundImage = ”URL（IMG/back_about_3.jpg）“; \t \t \t图像标识= 0; \t \t \t}}} \t \t \t的setTimeout（ “changeimage（” + every_seconds + “）”，（（every_seconds）* 1000））; \t \t \t} \t \t –

@ chepe263是啊谢谢取出后 –

假设你有这样的：

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

});

希望这有助于。干杯

来源

2014-01-12 04:54:34

的那部分人：d感谢lottttttttt :)它帮助.. *一个小调整是删除“../”从图像变量，但一旦我做到了，那很酷。谢谢你:) :) –

很高兴帮助你:)。干杯，从拉巴斯，玻利维亚 –

您需要使用的时间间隔改变图像的每个5秒 100％的工作

<html> 

<head> 
    <script src='jquery.min.js'/></script> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
    $('#main').css('background-url','../img/back_about_1.jpg'); //default url of image 
    count = 0; 
    setInterval(function(){ 
    if(count==0){ 
    $('#main').css('background-url','../img/back_about_2.jpg'); //url of second image 
    }else if(count==1){ 
    $('#main').css('background-url','../img/back_about_3.jpg'); //url of third image 
    }else{ 
    $('#main').css('background-url','../img/back_about_1.jpg'); //urll of first image 
    } 
    if(count==2){ 
    count =0; 
    } 
    else{ 
    count++; 
    } 
    } 
    ,5000); //set the time 

    }); 
</script> 
</head> 
<body id='main'> 


</body> 

</html>

我已经花时间做这个，如果你需要任何帮助，不要问这会为你

工作

来源

2014-01-12 05:02:37 sanjeev

Yupp :)这完美的作品:) ..虽然有时我没有得到的图像，而是我得到一个白色背景（也许我设置为#fff的身体的默认背景）？你知道为什么？ and sorry dude ..我不能投这个答案..它说我需要15声望，所以原谅我:) –

得到15声望和投票哈哈.. – sanjeev

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

来源

2014-01-12 05:02:48

圈背景图像使用jQuery

回答

相关问题