改变背景图像jquery [英] change background image jquery
本文介绍了改变背景图像jquery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我试图旋转背景图像从一组三个图像我有。我想出了一个办法做到这一点，但事情发生在这里。从下面的例子，你应该得到i = 0，1和2，但仍然达到值3！和newBg [3]未定义！所以它保持10秒钟SHOWING NOTHING
您可以在这里找到一个工作示例： http://www.goesenlinea.com/agus/
<！DOCTYPE html&
< html lang =en>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< link href =css / bootstrap-responsive.min.css =stylesheet>
< link href =css / bootstrap.min.css =stylesheet>
<！ - [if IE]>
< link href =css / bootstrap.min.ie.css =stylesheet>
<！[endif] - >
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =js / jqueryBg.js>< / script>
< script type =text / javascriptsrc =js / bootstrap.js>< / script>
< link href =css / bootstrap-responsive.css =stylesheet>
< style>
body {
background：url（'img / fond1.png'）无重复中心中心固定;
background-color：black;
-moz-background-size：cover;
-webkit-background-size：cover;
-o-background-size：cover;
background-size：cover;
-webkit-transition：2s;
-moz-transition：2s;
-ms-transition：2s;
-o-transition：2s;
transition：2s;
}
.blackbox {
/ * border-top：1px solid＃2b2b2b; * /
border-left：1px solid＃2b2b2b;
border-right：1px solid＃000;
border-bottom：1px solid＃000;
background：url（'img / boxes_background_color_1x1.png'）repeat transparent;
}
< / style>
< script>
var newBg = ['img / fond1.png'，'img / fond2.png'，'img / fond3.png'];
var i = 0;
var rotateBg = setInterval（function（）{
if（i == 3）
i = 0;
else
i ++;
$ '）.css（{backgroundImage：'url（'+ newBg [i] +'）'}）;
}，10000）;
< / script>
< / head>
< body>
< div class =container-fluid>
< div class =row-fluid>
< div class =span2>
<！ - espaciador izquierda - >
< / div>
< div class =span8 blackbox>
< div class =span12>
< img src =img / logo glx.png/>
< div class =row-fluid>
< div class =span12>
< div class =navbar navbar-inverse>
< div class =navbar-inner>
< div class =container>
<！ - .btn-navbar用于折叠导航栏内容的切换 - >
< a class =btn btn-navbardata-toggle =collapsedata-target =。nav-collapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / a>
<！ - 一定要把品牌留在那里，如果你想要它显示 - >
< a class =brandhref =＃>专案名称< / a>
<！ - 一切你想隐藏在940px或更少，放在这里 - >
< div class =nav-collapse collapse>
asdfasdfad
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =span2>
<！ - espaciador derecha - >
< / div>
< / div>
< / div>
< / body>
解决方案>
除非我这样做：
i ++;
if（i> 2）{
i = 0;
}
$（'body'）css（{backgroundImage：'url（'+ newBg [i] +'）'}）;
so im trying to rotate background image from a set of three images i have. I figured out a way to do this but something strage is going on here. From the example below you should get i= 0, 1 and 2 but still is reaching value 3!! and newBg[3] is undefined! so it stays 10 seconds SHOWING NOTHING
you can find a working example here: http://www.goesenlinea.com/agus/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if IE ]>
<link href="css/bootstrap.min.ie.css" rel="stylesheet">
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryBg.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
background: url('img/fond1.png') no-repeat center center fixed;
background-color: black;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
-o-transition: 2s;
transition: 2s;
}
.blackbox {
/*border-top: 1px solid #2b2b2b;*/
border-left: 1px solid #2b2b2b;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
background: url('img/boxes_background_color_1x1.png') repeat transparent;
}
</style>
<script>
var newBg = ['img/fond1.png', 'img/fond2.png', 'img/fond3.png'];
var i = 0;
var rotateBg = setInterval(function(){
if(i==3)
i=0;
else
i++;
$('body').css({backgroundImage : 'url(' + newBg[i] + ')'});
}, 10000);
</script>
</head>
<body>
<div class="container-fluid" >
<div class="row-fluid">
<div class="span2">
<!-- espaciador izquierda -->
</div>
<div class="span8 blackbox">
<div class="span12" >
<img src="img/logo glx.png" />
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
asdfasdfad
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span2">
<!-- espaciador derecha -->
</div>
</div>
</div>
</body>
解决方案
what @tcovo said.
Except I would do it like this:
i++;
if ( i > 2 ){
i = 0;
}
$('body').css({backgroundImage : 'url(' + newBg[i] + ')'});
这篇关于改变背景图像jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
