how to change background images with jquery

Question

I am developing a website with changing background images which is activated automatically on window load and it can be overridden when we click navigation button, My code works properly on window load but on button click it is not working, can you please help me in this regard. Thanks in advance

HTML

<body>
  <div id="wrap">
    <img class="bgfade" id="bg1" src="4.png" alt="Smiley face" >
    <img class="bgfade" id="bg2" src="1.png">
    <img class="bgfade" id="bg3" src="2.png">
    <img class="bgfade" id="bg4" src="3.png">
  </div>
  <ul id="sliding">                                 
    <li id="btn1" onClick = "btn1_click()"><a href="#"><span>1</span></a></li>
    <li id="btn2" onClick = "btn2_click()"><a href="#"><span>2</span></a></li>
    <li id="btn3" onClick = "btn3_click()"><a href="#"><span>3</span></a></li>
    <li id="btn4" onClick = "btn4_click()"><a href="#"><span>4</span></a></li>
  </ul>
</body>

CSS

#wrap{
  position:absolute;
  z-index:-1; 
  height: 677px;
  width: 1366px;
  height: 100%;
  width: 100%;
  top:0; 
  left:0; 
  background-color:black;
}

#wrap img.bgfade{
  position:absolute;
  top:0;
  display:none;
  width:100%;
  height:100%;
  z-index:-1;
}

Jquery

var timer = 0;
var i =0;

window.onload = function(){ 
  $("img.bgfade").hide();
  $("#bg1").attr("src","4.png");
  $("#bg2").attr("src","1.png");
  $("#bg3").attr("src","2.png");
  $("#bg4").attr("src","3.png");
  anim(); 
}

function anim() {
  $("#wrap img.bgfade").first().appendTo("#wrap").fadeOut(1500);
  i++;
  $("#wrap img").first().fadeIn(1500);
  $("#sliding li").css({"background": "url('images/nb/NB_1.png')"});
  if (i>4)
  {
    i = 1;
  }
  switch(i)
  {
    case 1:  $("#btn1").css({"background": "url('images/nb/NB_1.png') 0px -15px no-repeat"});
    break;
    case 2: $("#btn2").css({"background": "url('images/nb/NB_1.png') 0px -15px no-repeat"});
    break;
    case 3: $("#btn3").css({"background": "url('images/nb/NB_1.png') 0px -15px no-repeat"});
    break;
    case 4: $("#btn4").css({"background": "url('images/nb/NB_1.png') 0px -15px no-repeat"});
    break;
  } 
  timer = setTimeout(anim, 10000);
}

function btn2_click()
{
  i = 1;
  $("#wrap img.bgfade.bg1").attr("src","1.png");
  $("#wrap img.bgfade.bg2").attr("src","2.png");
  $("#wrap img.bgfade.bg3").attr("src","3.png");
  $("#wrap img.bgfade.bg4").attr("src","4.png");    
  clearTimeout(timer);
  anim();
}

The above button click code is not working properly wrap is continuing its order how can I change the order

This can help .. [see here](http://stackoverflow.com/questions/4578714/changing-background-image-using-jquery)! here is an examople.. — SourabSharma, Jan 10 '14 at 09:03
Thanks for your reply, actually it is not the problem of not adding url as your example suggest, the problem is with wrap , the appended images on window load are not changing when button clicks — Catherine, Jan 10 '14 at 09:33

score 0 · Answer 1 · answered Jan 10 '14 at 09:06

As I understand, the problem is here:

function btn2_click()
{
  i = 1;
  $("#wrap img.bgfade.bg1").attr("src","1.png");
  $("#wrap img.bgfade.bg2").attr("src","2.png");
  $("#wrap img.bgfade.bg3").attr("src","3.png");
  $("#wrap img.bgfade.bg4").attr("src","4.png");    
  clearTimeout(timer);
  anim();
}

so, I cannot find any #wrap img.bgfade.bg1 in your HTML: you have no class .bg1. Replace it with #bg1 and that's it, e.g. like you do in onload event:

function btn2_click()
{
  i = 1;
  $("#bg1").attr("src","1.png");
  $("#bg2").attr("src","2.png");
  $("#bg3").attr("src","3.png");
  $("#bg4").attr("src","4.png");    
  clearTimeout(timer);
  anim();
}

Thanks for your reply, I tried that also it is not working, problem is with wrap , the appended images on window load are not changing when button clicks — Catherine, Jan 10 '14 at 09:29

score 0 · Answer 2 · answered Jul 06 '14 at 01:02

0

bg1 etc are not classes. Try this:

  $("#bg1").attr("src","1.png");
  $("#bg2").attr("src","2.png");
  $("#bg3").attr("src","3.png");
  $("#bg4").attr("src","4.png");

answered Jul 06 '14 at 01:02

Cees Timmerman

17,623
11
91
124

how to change background images with jquery

HTML

CSS

Jquery

2 Answers2