javascrip 仿Flash图片替换效果
日期：2014-05-16 浏览次数：20385 次
javascrip 仿Flash图片轮换效果
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>
&
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>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
