demo

Question

我有3个不同的背景图像，我希望水平地逐个添加它们。

#bgwrap{width:100%;height:100%; overflow:hidden;}
#bg1{width:1000px;height:100%; background: #000 url(bg1.jpg) no-repeat center top;}
#bg2{width:1000px;height:100%; background: #000 url(bg2.jpg) no-repeat center top;}
#bg3{width:1000px;height:100%; background: #000 url(bg3.jpg) no-repeat center top;}

稍后我可以使用jquery在我想要查看第二个背景时仅选择视图开始宽度= 1001px到2000px。那么如何将它们一起添加到单个类或ID中，以便我可以使用jquery来选择它？

Answer 1

demo

您可以设置默认背景，然后使用jQuery更改它。

$('body').css({
    'background-image': 'url('+ newBackgroundImage + ')'
});

在我的演示中，我将它们存储在一个数组中。

var bgs = ['bg1.jpg', 'bg2.jpg', '...'];

如果您需要预先加载每个图片，可以创建图片。

var ct = 0;
function loaded(){
    ct++;
    if (ct === bgs.length) {
        // all images are loaded
    }
}

for (var i=0; i<bgs.length; i++) {
    var img = document.createElement("img");
    img.onload = loaded;
    img.src = bgs[i];
}

Answer 2

http://jsfiddle.net/4tb6Q/

<div id="div1">img1</div>
<div id="div2">img2</div>
<div id="div3">img3</div>

CSS

div {
height: 60px; //image height
width:60px; //image width
position:absolute;
}

jquery的

$("button").click(function(){    
var $divL=$("div:last");
var $divF=$("div:first");
$divL.remove().insertBefore($divF);
});

Answer 3

#main_div{ width:1000px;overflow:hidden;}
#pic_div{width:3000px}
#pic1{width:1000px;float:left;background: #000 url(bg1.jpg)}
#pic2{width:1000px;float:left;background: #000 url(bg2.jpg)}
#pic3{width:1000px;background: #000 url(bg3.jpg)}
<div id="main_div">
  <div id="pic_div">
  <div id="pic1"></div>
  <div id="pic2"></div>
  <div id="pic3"></div>
  </div>
</div>

$("#main_div").click(function(){
if($("#pic_div").css("margin-left")<2000)
 {
var a=$("#pic_div").css("margin-left");
a=a+1000;
a=a+"px";
$("#pic_div").css("margin-left",a);
  }
else
 {
$("#pic_div").css("margin-left",'0px');
 }

});

水平地一个接一个地添加背景图像

3 个答案:

demo