应用错误收集

如何使用jquery更改背景图像

时间：2014-01-10 08:58:56

标签： javascript jquery html css

我正在开发一个改变背景图像的网站，它会在窗口加载时自动激活，当我们点击导航按钮时它可以被覆盖，我的代码在窗口加载时正常工作但按钮点击它不起作用，你能帮忙吗？我在这方面。提前致谢

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

上面的按钮点击代码无法正常工作换行继续其命令如何更改顺序

2 个答案:

答案 0 :(得分：0)

据我了解，问题在于：

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

所以，我在你的HTML中找不到任何 #wrap img.bgfade.bg1 ：你没有班级 .bg1 。用＃bg1替换它，就是这样，例如就像你在onload事件中所做的那样：

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

答案 1 :(得分：0)

bg1等不是课程。试试这个：

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