Question

＆＃13;

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;

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

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

Answer 1

您的代码是正确的。但不知何故，在调用更改时，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()

Answer 2

change（）与fade（）做同样的事情吗？

你不能只做这样的事情：

function change() {
  fade();
}

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

2 个答案: