说明：本文是根据上一篇文章：for循环里的子函数获取i值问题 所写的一篇实例，意在帮助有相同问题的朋友解决问题。如有什么好的建议，请在下方留言，我会及时回复，望与诸位共同学习进步。
<!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 () {
// 补0 操作
function zeroFormat(i) {
return "0" + i;
}
// 封装显示切换图片的函数
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>
与上文重复的地方没有写注释，有不懂得地方，请参考上篇文章，结合着来看，相信就会明白！
网友评论