說明：本文是根據(jù)上一篇文章：for循環(huán)里的子函數(shù)獲取i值問題 所寫的一篇實(shí)例，意在幫助有相同問題的朋友解決問題男韧。如有什么好的建議氢哮，請在下方留言，我會及時回復(fù)诬烹，望與諸位共同學(xué)習(xí)進(jìn)步砸烦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#box {
height: 70px;
width: 360px;
padding-top: 360px;
border: 1px solid #ccc;
margin: 100px auto;
background: url("images/01big.jpg") no-repeat;
}
#box ul {
overflow: hidden;
border-top: 1px solid #ccc;
}
#box li {
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
window.onload = function () {
// 補(bǔ)0 操作
function zeroFormat(i) {
return "0" + i;
}
// 封裝顯示切換圖片的函數(shù)
function changeImage(obj) {
var box = document.getElementById("box");
var obj = document.getElementsByTagName(obj);
for (var i = 0; i < obj.length; i++) {
(function (i) {
obj[i].onmouseover = function () {
var a = i + 1; // 索引值從0開始，這里需要+1
var count = zeroFormat(a); //獲取到圖片序號
box.style.backgroundImage = "url(images/" + count + "big.jpg)";
}
})(i)
}
}
changeImage("li");
}
</script>
</body>
</html>
與上文重復(fù)的地方?jīng)]有寫注釋椅您，有不懂得地方外冀，請參考上篇文章，結(jié)合著來看掀泳，相信就會明白雪隧！
