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

嘿，我已经找到并稍微调整了最好的简单脚本，用于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>

按如下方式更改updateIndex()函数：

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

相关内容

最新更新

热门标签：