javascript - 如何用jquery改变背景图片-6ren

javascript - 如何用jquery改变背景图片

转载作者：行者123 更新时间：2023-11-28 11:33:20

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

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

查询

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

上面的按钮点击代码不能正常工作wrap 正在继续它的订单我该如何更改订单

最佳答案

据我了解，问题出在这里:

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

关于javascript - 如何用jquery改变背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21039873/