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

adding background images one after another horizontally

本文关键字：一个 背景 图像 水平 添加      更新时间：2023-09-26

我有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来选择它呢？

演示

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

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

#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');
 }
});
相关文章：