最简单的背景屏幕点击图片更改故障答案

【问题标题】：Simplest BACKGROUND SCREEN ON-CLICK PICTURE CHANGE malfunction最简单的背景屏幕点击图片更改故障
【发布时间】：2015-06-13 11:03:18
【问题描述】：

嘿，我已经找到并稍微修改了用于 ONCLICK 背景图像更改的最佳简单脚本。它像梦一样工作 - 强烈推荐，但由于某种原因，我无法解决背景图片旋转停止的问题。

它适用于 2 张图片，但是当我添加第二个“函数 updateIndex”以添加更多图片时，它在点击时显示的是以下 JPEG 序列：100 - 101 - 102 - 100.. 所以一旦它回到第一张图片 ONCLICK 不再工作了。

我希望能够在图片旋转队列中添加任意数量的图片。

任何帮助将不胜感激。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>INDEX</title>
<style type="text/css">
   html, body, #body {
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
-webkit-background-size: cover no-repeat left top fixed;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 0px;
margin-left: 0px;
 }

 #body.imageOne {
background-image: url("100.jpg");
}
#body.imageTwo {
background-image: url("101.jpg");
}
#body.imageThree {
background-image: url("102.jpg");
}
#body.imageFour {
background-image: url("103.jpg");
}
#body.imageFive {
background-image: url("104.jpg");
}
#body.imageSix {
background-image: url("105.jpg");
}


</style>
</head>

<body>

<div id="body" class="imageOne">
</div>




<script type="text/javascript">//<![CDATA[ 

var bodyObj, className, index;
bodyObj = document.getElementById('body');



index = 1;
className = [
'imageOne',
'imageTwo',
'imageThree',
'imageFour',
'imageFive',
'imageSix'
];



function updateIndex(){
if(index === 0){
    index = 1;
}else{
    index = 0;
}

}

function updateIndex(){
if(index === 1){
    index = 2;
}else{
    index = 0;
}
}



// JPEG picture rotation: 100 - 101 - 102 - (then back to) 100 (perfect) but then stops at 100 and SCREEN ONCLICK doesnt work anymore! help.


bodyObj.onclick = function(e){
e.currentTarget.className = className[index];
updateIndex();
}

//]]>  

</script>

</body>

</html>

【问题讨论】：

标签： javascript css

【解决方案1】：

如下更改您的updateIndex() 函数：

function updateIndex() {
    index = (index + 1) % className.length;
}

【讨论】：

很高兴听到这个消息。如果它解决了您的问题，请不要忘记接受/支持答案！
我会尽快获得足够的声望点，再次感谢