Question

对于知道自己在做什么的人来说，这可能只是一个小问题......

我想创建这样的东西：https：//marvelapp.com/404 Gif作为全屏背景加载，当你按下“空格”时，你会得到另一个gif，依此类推。看到所有的GIF后，循环再次开始。

所以我搜索了如何做到这一点，我发现了这种方法（选项3）：https：//www.linkedin.com/pulse/20140702040804-99746459-change-css-background-image-with-click （也在这里使用：How to change css background-image on click?）在那里，它不适用于空间，但用鼠标点击更好的东西。

我尝试插入一个while循环以使其与两个以上的图片一起工作但是...它不起作用我不知道为什么

我的方法：http://jsfiddle.net/h3mfk347/

function updateIndex(){
while (index < 4) {
    index++;
}
} index = 0;
bodyObj.onclick = function(e){
e.currentTarget.className = className[index];
updateIndex();
}

所以我猜这更像是循环问题，而不是其他部分。

感谢您提供任何帮助或提示：）

Answer 1

你不需要循环，使用＆＃34; if＆＃34; （条件结构）：

if (index < 4) {
    index++;
} else {
    index = 0;
}

你的while循环会将1添加到索引，直到index为4，然后将其重新设置为0，以便重新启动。

类名（在CSS中）也不能以数字开头（如＃body.4和＃body.5），但必须以字母开头（如＃body.img4）

Answer 2

我建议使用jQuery，这有点简单：

HTML：

<script src='path-to-jquery.js'></script>
<div id="body" class="backgroundImage" style='background-image: url("http://lorempixel.com/300/200/sports/1"); max-width:200px; max-height:200px;'></div>

使用Javascript：

images = [
  'http://lorempixel.com/300/200/sports/1',
  'http://lorempixel.com/300/200/sports/2',
  'http://lorempixel.com/300/200/sports/3',
  'http://lorempixel.com/300/200/sports/4', // This seems to not be a valid image, but meh
];

index = 0;

$('.backgroundImage').click(function(){
    if (index < (images.length-1)) { // This uses length-1 because the array is 0-indexed.
    index++;
  } else {
    index = 0;
  }
    $(this).css({
    'background-image' : "url(" + images[index] + ")",
  });
});

http://jsfiddle.net/xp60m5pq/

基本上我们在这里做的是在HTML中定义一个起始图像（你也可以使用CSS，就像你所做的那样），然后在点击div时，而不是更改类，而不是使用CSS根据您定义的数组更改背景图像。：）

单击更改CSS背景图像 - while循环不起作用

2 个答案: