<!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的图片轮换效果 —— www.miaov.com 妙味课堂</title>
<link rel="stylesheet" type="text/css" href="miao_style.css">
<script src="../move.js"></script>
<script>
function getByClass(oParent, sClass)
{
var aEle=document.getElementsByTagName(‘*‘);
var i=0;
var aResult=[];
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function ()
{
var oDiv=document.getElementById(‘playeimages‘);
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 oSmallUl=getByClass(oDiv, ‘small_pic‘)[0].getElementsByTagName(‘ul‘)[0];
var aSmallLi=oSmallUl.getElementsByTagName(‘li‘);
var oBigUl=getByClass(oDiv, ‘big_pic‘)[0];
var aBigLi=oBigUl.getElementsByTagName(‘li‘);
var iNow=0;
var iMinZindex=2;
var i=0;
oSmallUl.style.width=aSmallLi.length*aSmallLi[0].offsetWidth+‘px‘;
//上面的左右按钮
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(i=0;i<aSmallLi.length;i++)
{
aSmallLi[i].index=i;
aSmallLi[i].onmouseover=function ()
{
startMove(this, ‘opacity‘, 100);
}
aSmallLi[i].onmouseout=function ()
{
if(this.index!=iNow)
{
startMove(this, ‘opacity‘, 60);
}
}
aSmallLi[i].onclick=function ()
{
if(this.index==iNow)return;
iNow=this.index;
tab();
}
function tab()
{
for(i=0;i<aSmallLi.length;i++)
{
startMove(aSmallLi[i], ‘opacity‘, 60);
}
startMove(aSmallLi[iNow], ‘opacity‘, 100);
aBigLi[iNow].style.zIndex=iMinZindex++;
aBigLi[iNow].style.height=0;
startMove(aBigLi[iNow], ‘height‘, oBigUl.offsetHeight);
if(iNow==0)
{
startMove(oSmallUl, ‘left‘, 0);
}
else if(iNow==aSmallLi.length-1)
{
startMove(oSmallUl, ‘left‘, -(iNow-2)*aSmallLi[0].offsetWidth);
}
else
{
startMove(oSmallUl, ‘left‘, -(iNow-1)*aSmallLi[0].offsetWidth);
}
}
oBtnPrev.onclick=function ()
{
iNow--;
if(iNow==-1)
{
iNow=aSmallLi.length-1;
}
tab();
}
oBtnNext.onclick=function ()
{
iNow++;
if(iNow==aSmallLi.length)
{
iNow=0;
}
tab();
}
}
}
</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>
注意要点：
1css页面布局，将li叠放，position:absolute;left都是0.
2.图片之所以会有高度变化，是因为，li的高度是从0-390,li里面嵌套img，img的高度是固定不变的，这样的话，高度是变化的。