javascript - adding background images one after another horizontally -

i have 3 different background images , want add them 1 after 1 horizontally.

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

later can use jquery pick view start width=1001px 2000px when want see second background. how add them single class or id, can use jquery select it?

demo

you can set default background, , change jquery.

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

---

in demo stored them in array.

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

if need preload each of them, can create images.

var ct = 0; function loaded(){     ct++;     if (ct === bgs.length) {         // images loaded     } }  (var i=0; i<bgs.length; i++) {     var img = document.createelement("img");     img.onload = loaded;     img.src = bgs[i]; }