问题描述
- 一个js的for循环的问题
-
是这样的，我想做一个和这个图片一样的带缩略图的图片轮换。
问题就出在这个缩略图载入这一块。
我的思路是，页面布局里面先创建一个空的，css样式里面ul li img的display设置为none。
js里面先创建一个数组用来存图片缩略图的src。加载页面的时候，用ul的innerHTML通过for循环来输入数组长度个''
然后给里面的img加上src属性，给li加个index索引，加上鼠标移入移出事件之类的。代码如下：
var aSrc = ['img/1.png','img/2.png','img/3.png','img/4.png'];
var oIndex = document.getElementById('indexUl');
var aLi = oIndex.getElementsByTagName('li');
var aImgPre = oIndex.getElementsByTagName('img');
for(var i=0; i
oIndex.innerHTML += '';
}
for(var i=0; i
aLi[i].index = i;
aImgPre[i].src = aSrc[i];
aLi[i].onmouseover = function(){
aImgPre[this.index].style.display = 'block';
}
aLi[i].onmouseout = function(){
aImgPre[this.index].style.display = 'none';
}
}
问题就是。。这样写没什么问题，可是为什么不能把两个for循环写在一起呢
for(var i=0; i
oIndex.innerHTML += '';
aLi[i].index = i;
aImgPre[i].src = aSrc[i];
aLi[i].onmouseover = function(){
aImgPre[this.index].style.display = 'block';
}
这样写为什么不行呢？我一开始这样写，发现，只有最后一个li能正常触发鼠标移入移出事件，前面的li都触发不了。我查了半天，后来发现这样写，aImgPre 里面获得的图片除了最后一个类型是html的图片元素，其他的类型都是undefined。。。这是为什么。。
解决方案
你的for()括号里的表达式真诡异，没见过这样写的
解决方案二：
aLi[i].onmouseover = function(){
aImgPre[this.index].style.display = 'block';
}
把这段改用委托事件
解决方案三：
你的for()括号里的表达式真诡异，没见过这样写的