请教多图淡入淡出功能的实现方法

最近客户要做一个首页形象展示功能，要求用JS代码开发，有6个格子，2行排列，每个格子在鼠标没有滑过时候都是空白，当鼠标滑过任意一个格子，格子里面就开始淡入淡出显示五张图片，鼠标任意时间离开格子内，格子中图片如果显示了，就执行淡出方法。我自己写了下，每个格子调用一个方法貌似要干扰，只能一个个的执行滑过，离开事件，我想了下把每个格子的方法做成自定义类来实现，但是还是没对，请各位JS达人支支招吧！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jquery 有fadeIn()和fadeOut()在括号内设置毫秒就可以了，还有一个函数是siblings 同辈的标签除去自身其他的，这个可以达到你的目的
给LZ来个完整的demo。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type='text/css'>
*{padding:0;margin:0;}
body{
text-align:center;
}
.box{
width:300px;height:320px;
overflow:hidden;
position:relative;
float:left;
margin:10px 10px 0px 0px;
}
.box img{
width:300px;
position:absolute;left:0px;top:0px;
filter:alpha(opacity=0);
opacity:0;
}
</style>
<script type="text/javascript">/**************************************************************/
function $(id){
return (typeof(id) == 'string')? document.getElementById(id) : id;
}
function getStyle(id,style) {
_element = $(id);
var _value = _element.style[style];
if (!_value) {
if(document.defaultView && document.defaultView.getComputedStyle) {
var _css = document.defaultView.getComputedStyle(_element, null);
_value = _css ? _css.getPropertyValue(style) : null;
} else if(_element.currentStyle) {
_value = _element.currentStyle[reWriteStyleName(style)];
}
} if(window.opera && (style == 'left' || style == 'top' || style == 'bottom' || style == 'right')){
if(getStyle(_element, 'position') == 'static') {
_value = 'auto';
}
}
return (_value == 'auto')? null : _value;
}
function setStyle(id,style) {
_element = $(id);
for(each in style) {
_element.style[reWriteStyleName(style[each][0])] = style[each][1];
}
}
function reWriteStyleName(str) {
var _oStringList = str.split('-');
if (_oStringList.length == 1) {
return _oStringList[0];
}
var _camelizedString = (str.indexOf('-') == 0)? _oStringList[0].charAt(0).toUpperCase() + _oStringList[0].substring(1):_oStringList[0];
for (var i = 1; i <_oStringList.length;i++) {
  var _s = _oStringList[i];
  _camelizedString += _s.charAt(0).toUpperCase() + _s.substring(1);
}
return _camelizedString;
}
function getOpacity(obj) {
var _temp = 0
if(document.all){
_temp = getStyle(obj, "filter")
_temp = (_temp == "")? 100 : (_temp.match(/alpha$opacity=(.*)$/))? _temp.match(/alpha$opacity=(.*)$/)[1] : 100;
} else {
_temp = !isNaN(getStyle(obj, "opacity"))? getStyle(obj, "opacity")*100 : 100;
}
return parseInt(_temp);
}
function setOpacity(obj,value){
var _v = (value > 100)? 100 : (value < 0)? 0 : value;
if(document.all){
setStyle(obj, [["filter", "alpha(opacity="+ _v +")"]]);
} else {
setStyle(obj, [["opacity", _v / 100]]);
}
}
/**************************************************************/function showImages (id, time) {
this.imgBox = $(id);
if(!this.imgBox) {
return;
}
this.imgList = this.imgBox.getElementsByTagName('img');
if(!this.imgList.length) {
return;
}
this.maxIndex = this.imgList.length - 1;
this.time = time || 2000;
this.timeID = null;
this.index = 0;
this.flag = false;
var _self = this;
this.imgBox.onmouseover = function() {
_self.show();
};
this.imgBox.onmouseout = function(e) {
var ev = e || window.event;
_self.hidden(ev);
};
}showImages.prototype = {
show: function() {
this.flag = true;
this.first();
},
hidden: function() {
this.flag = false;
},
first: function() {
this.fadeOut(this.imgList[this.index]);
var _self = this;
setTimeout(function(){_self.next()}, this.time);
},
next: function(){
this.fadeIn(this.imgList[this.index]);
this.index = (this.index >= this.maxIndex)? 0 : this.index + 1;
if(this.flag) {
this.first();
}
},
fadeIn: function(img) {
var _in = new effect({obj: img, eValue: 0});
_in.toEnd();
},
fadeOut: function(img) {
var _out = new effect({obj: img, eValue: 100});
_out.toEnd();
}

}/*
op = {
obj: element,
sValue: 0,
eValue: 100
step: 10,
speed: 10
}
*/
var effect = function(op) {
this.element = $(op.obj);
var _sValue = op.sValue || getOpacity(this.element);
if(_sValue == op.eValue) {
return;
}
this.map = [_sValue];
var _step = op.step || 10;
var _steps = Math.abs((op.eValue - _sValue) / _step) - 1;
var _flag = ((op.eValue - _sValue) > 0)? 1 : -1;
for(var i = 1; i < _steps; i++) {
this.map[i] = _sValue + i * _step * _flag;
}
this.map.push(op.eValue);
this.speed = op.speed || 10;
this.maxIndex = this.map.length - 1;
}
effect.prototype = {
toEnd: function(index){
if(this.map) {
var _index = index || 0;
if(_index > this.maxIndex) {
return;
}
setOpacity(this.element, this.map[_index]);
var _self = this;
setTimeout(function(){_self.toEnd(_index + 1)}, this.speed);
}
},
toStart: function(index) {
if(this.map) {
var _index = index || this.maxIndex;
if(_index < 0) {
return;
}
setOpacity(this.element, this.map[_index]);
var _self = this;
setTimeout(function(){_self.toStart(_index - 1)}, this.speed);
}
}
}
</script>
</head>
</body>
<div id='box1' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<div id='box2' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<div id='box3' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<div id='box4' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<div id='box5' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<div id='box6' class="box">
<img src="http://img.sdchina.com/news/20100425/c01_109424ed-2cff-44be-b63e-af0661b2553a_0.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8498c7f2-2bd9-4305-9ece-49a33b1f1f6f_1.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_8551f61b-6e85-426b-a52c-964b904f8e21_3.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_474b92b7-0e22-464b-a7dc-9d6c6f41144f_5.jpg" />
<img src="http://img.sdchina.com/news/20100425/c01_35030709-4747-4f19-94dd-041b5bbd60cb_8.jpg" />
</div>
<script type="text/javascript">
var a = new showImages('box1');
var b = new showImages('box2');
var c = new showImages('box3');
var d = new showImages('box4');
var e = new showImages('box5');
var f = new showImages('box6');
</script>
</body>
</html>
我做出来的效果地址：
http://www.cdshibo.com/70c/Index_Test.html
开始鼠标滑过每个格子还可以实现，但是速度快些，就会出现有的格子不执行mouseout方法。
仔细检查了代码，不知道为什么？
感谢danica7773提供方法，不过你的方法好像和我出现的问题一样。