js for循环图片轮播问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 800px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
padding-top: 15px;
}
h3 {
color: red;
}
#main img {
width: 600px;
float: left;
}
ul {
list-style: none;
font-size: 20px;
font-family: 宋体;
cursor: pointer;
float: right;
margin-right: 10px;
}
li {
height: 40px;
line-height: 40px;
border-bottom: 1px dotted black;
}
li:hover {
color: #ffff00;
background: #202124;
}
</style>
</head>
<body>
<div id="main">
<h3>logo设计作品</h3>
<img id="im" src="img/logo设计/logo设计1 焦燕.jpg" />
<ul>
<li>设计学生：焦燕</li>
<li>设计学生：李春晓</li>
<li>设计学生：刘嘉静</li>
<li>设计学生：孙松</li>
<li>设计学生：赵思琪</li>
<li>设计学生：袁越</li>
<li>设计学生：王萱</li>
<li>设计学生：朱美纯</li>
<li>设计学生：陈凡</li>
</ul>
</div>
<script type="text/javascript">
var imgs = [
"img/logo设计/logo设计1 焦燕.jpg",
"img/logo设计/logo设计2 李春晓.jpg",
"img/logo设计/logo设计3 刘嘉静.jpg",
"img/logo设计/logo设计4 孙松.jpg",
"img/logo设计/logo设计5 赵思琪.jpg",
"img/logo设计/logo设计6 袁越.jpg",
"img/logo设计/logo设计7 王萱.jpg",
"img/logo设计/logo设计8 朱美纯.jpg",
"img/logo设计/logo设计9 陈凡.jpg"
];
for (var i = 0; i < lis.length; i++) {
lis.[i].onmouseover=function() {
im.src=imgs[i];
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 800px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
padding-top: 15px;
}
h3 {
color: red;
}
#main img {
width: 600px;
float: left;
}
ul {
list-style: none;
font-size: 20px;
font-family: 宋体;
cursor: pointer;
float: right;
margin-right: 10px;
}
li {
height: 40px;
line-height: 40px;
border-bottom: 1px dotted black;
}
li:hover {
color: #ffff00;
background: #202124;
}
</style>
</head>
<body>
<div id="main">
<h3>logo设计作品</h3>
<img id="im" src="img/logo设计/logo设计1 焦燕.jpg" />
<ul>
<li>设计学生：焦燕</li>
<li>设计学生：李春晓</li>
<li>设计学生：刘嘉静</li>
<li>设计学生：孙松</li>
<li>设计学生：赵思琪</li>
<li>设计学生：袁越</li>
<li>设计学生：王萱</li>
<li>设计学生：朱美纯</li>
<li>设计学生：陈凡</li>
</ul>
</div>
<script type="text/javascript">
var imgs = [
"img/logo设计/logo设计1 焦燕.jpg",
"img/logo设计/logo设计2 李春晓.jpg",
"img/logo设计/logo设计3 刘嘉静.jpg",
"img/logo设计/logo设计4 孙松.jpg",
"img/logo设计/logo设计5 赵思琪.jpg",
"img/logo设计/logo设计6 袁越.jpg",
"img/logo设计/logo设计7 王萱.jpg",
"img/logo设计/logo设计8 朱美纯.jpg",
"img/logo设计/logo设计9 陈凡.jpg"
];
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onmouseover=function() {
index = this.index;
im.src=imgs[this.index];
}
}
</script>
</body>
</html>
for (var i = 0; i < lis.length; i++) {
lis.[i].onmouseover=function() {
im.src=imgs[i];
}
}
这样为什么不行？
```javascript
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onmouseover=function(){
im.src=imgs[i];
}
})(i)
}
而这样可以？
```