javascript - 水平添加背景图像

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

演示

您可以设置默认背景，然后使用 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

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

});

Answer 3

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