HTML代码：
<!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>仿Flash的图片轮换效果</title>
<link rel="stylesheet" type="text/css" href="movestyle.css" />
<script src="move.js"></script>
<script>
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName("*");
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function (){
var oDiv=document.getElementById("playimages");
var oBtnPrev=getByClass(oDiv,"prev")[0];
var oBtnNext=getByClass(oDiv,"next")[0];
var oMarkLeft=getByClass(oDiv,"mark_left")[0];
var oMarkRight=getByClass(oDiv,"mark_right")[0];
var oDivSmall=getByClass(oDiv,"small_pic")[0];
var aLiSmall=oDivSmall.getElementsByTagName("li");
var oUlBig=getByClass(oDiv,"big_pic")[0];
var aLiBig=oUlBig.getElementsByTagName("li");
var nowZIndex=2;
var now=0;
//左右按钮
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
startMove(oBtnPrev,"opacity",100);
}
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
startMove(oBtnPrev,"opacity",0);
}
oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
startMove(oBtnNext,"opacity",100);
}
oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
startMove(oBtnNext,"opacity",0);
}
//大图切换
for(var i=0;i<aLiSmall.length;i++){
aLiSmall[i].index=i;
aLiSmall[i].onclick=function(){
if(this.index==now) return;
now=this.index;
aLiBig[this.index].style.zIndex=nowZIndex++;
aLiBig[this.index].style.height=0;
startMove(aLiBig[this.index],"height",320);
<!--问题：上面那一句的代码是让大图逐渐显示，但是不起作用，不知道错在什么地方，请高手指导-->
};
}
};
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div>
<li style="z-index:1;">
<img src="images/1.jpg"/>
</li>
<li>
<img src="images/2.jpg"/>
</li>
<li>
<img src="images/3.jpg"/>
</li>
<li>
<img src="images/4.jpg"/>
</li>
<li>
<img src="images/5.jpg"/>
</li>
<li>
<img src="images/6.jpg"/>
</li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter:100; opacity:1;">
<img src="images/1.jpg"/>
</li>
<li>
<img src="images/2.jpg"/>
</li>
<li>
<img src="images/3.jpg"/>
</li>
<li>
<img src="images/4.jpg"/>
</li>
<li>
<img src="images/5.jpg"/>
</li>
<li>
<img src="images/6.jpg"/>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS代码：
@charset "utf-8";
/* CSS Document */
body { background:#666;}
ul { padding:0; margin:0;}
li { list_style:none;}
img { border:0;}
.play { width:400px; height:430px; margin:50px auto 0; background:#999; font:12px Arial;}
.big_pic { width:400px; height:320px; overflow:hidden; border-bottom:1px solid #ccc; background:#222; position:relative;}
.big_pic li { widows:400px; height:320px; overflow:hidden; position:absolute; top:0; left:0; z-index:0; background:url(images/loading.gif) no-repeat center center;}
.mark_left { width:200px; height:320px; position:absolute; left:0; top:0; background:red; filter:alpha(opacity:0); opacity:0; z-index:3000;}
.mark_right { width:200px; height:320px; position:absolute; left:200px; top:0; background:green; filter:alpha(opacity:0); opacity:0; z-index:3000;}
.big_pic .prev { width:60px; height:60px; background:url(images/btn.gif) no-repeat; position:absolute; top:130px; left:10px; z-index:3001; filter:alpha(opacity:0); opacity:0; cursor:pointer;}
.big_pic .next { width:60px; height:60px; background:url(images/btn.gif) no-repeat; position:absolute; top:130px; right:10px; z-index:3001; filter:alpha(opacity:0); opacity:0; cursor:pointer;}