我有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到2000像素时，我想看到的第二背景。那么如何将它们添加到一个类或ID中，以便我可以使用jquery来选择它？

来源

2013-08-16 Pat

当你说它们添加一个后anothe水平方向，你的意思是在页面加载时，或者当某人向左（或向右）滚动并将其引入视图时？ –

将这些图像url路径保存在一个数组中。然后使用jquery从数组中选择图像路径。 –

是的，我想要水平添加它们的原因是因为我想向左或向右滚动它们 – Pat

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

来源

2013-08-16 05:17:27 FakeRainBrigand

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

来源

2013-08-16 05:34:03 rps

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

});

来源

2013-08-16 05:40:24 Arunkumar

我在哪里放置其他内容？如果我在main_div之外添加一个新的内容div，我所有的内容都会被压下。 – Pat

水平添加背景图像

回答

demo

相关问题