为什么背景图片没有变化?

时间:2016-08-18 11:16:47

标签: javascript html css



var ss = document.getElementById("slideshow");
var a = "url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg')";
var b = "url('http://mediafiles.allaboutsymbian.com/808/zeiss/g.jpg')";
var c = "url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRkqtidhhgFl5ZXd_RLpjXjD60S5s1OHA6nM9WffYBlk-JQMyF2')";
var d = "url('http://thehinduimages.com/admin/images/pimages/p9e4dd9e.jpg')";
var i = 2;

function fade() {
  loop: for (i; i < 5; i++) {
    switch (i) {
      case 1:
        document.getElementById("slideshow").style.backgroundImage = a;
        break;
      case 2:
        document.getElementById("slideshow").style.backgroundImage = b;
        break;
      case 3:
        document.getElementById("slideshow").style.backgroundImage = c;
        break;
      case 4:
        document.getElementById("slideshow").style.backgroundImage = d;
        i = 0;
        break;
    }
    i++;
    break loop;
  }
}
setInterval(fade, 3500);


function change() {
  if (ss.style.backgroundImage == '') ss.style.backgroundImage = a;
  else if (ss.style.backgroundImage == a) ss.style.backgroundImage = d;
  else if (ss.style.backgroundImage == b) ss.style.backgroundImage = a;
  else if (ss.style.backgroundImage == c) ss.style.backgroundImage = b;
  else if (ss.style.backgroundImage == d) ss.style.backgroundImage = c;

}
&#13;
#a1 {
  border-top: 40px solid transparent;
  border-right: 20px solid lime;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 45%;
  z-index: 1;
}
#slideshow {
  position: absolute;
  top: -3%;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94%;
  border-radius: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
}
&#13;
<p id="slideshow" style="background-image: url(' http://www.freedigitalphotos.net/images/img/homepage/87357.jpg ')">
</p>
<div onclick="change();" id="a1">
</div>
&#13;
&#13;
&#13;

绿色箭头应更改背景图像。但是,ss在调试时返回null。如何解决此问题,以便每次单击三角形时图像都会发生变化?

P.S。我在内联代码中使用了background-image属性,但仍然没有效果。

2 个答案:

答案 0 :(得分:0)

您的代码是正确的。但不知何故,在调用更改时,backgroundimage为null。因此,添加null条件可以解决您的问题。

function change() {
if (ss.style.backgroundImage == '') ss.style.backgroundImage = a;
else if (ss.style.backgroundImage == a) ss.style.backgroundImage = d;
else if (ss.style.backgroundImage == b) ss.style.backgroundImage = a;
else if (ss.style.backgroundImage == c) ss.style.backgroundImage = b;
else if (ss.style.backgroundImage == d) ss.style.backgroundImage = c;00
}
change()

答案 1 :(得分:0)

change()与fade()做同样的事情吗?

你不能只做这样的事情:

function change() {
  fade();
}