Question

嘿，我找到了，然后稍微调整了ONCLICK BACKGROUND IMAGE更改的最佳简单脚本。它的工作就像一个梦 - 强烈推荐，但由于某种原因，我无法解决背景图片旋转停止。

它适用于2张图片，但是当我添加第二个＆＃39;函数updateIndex＆＃39;添加更多图片所有它显示onclick是以下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>

Answer 1

更改updateIndex()功能，如下所示：

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

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

1 个答案: