<!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="move.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 oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall=oDivSmall.getElementsByTagName('li');
var oUlBig=getByClass(oDiv,'big_pic')[0];
var aLiBig=oUlBig.getElementsByTagName('li');
var nowZIndex=2;
var now=0;
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
for(var i=0;i<aLiSmall.length;i++)
{
aLiSmall[i].index=i;
aLiSmall[i].onclick=function()
{
if(this.index==now)return;
now=this.index;
tab();
}
function tab()
{
aLiBig[now].style.zIndex=nowZIndex++;
// alert(aLiBig[this.index].style.zIndex);
for(var i=0;i<aLiSmall.length;i++)
{
startMove(aLiSmall[i],'opacity',60);
}
startMove(aLiSmall[now],'opacity',100);
aLiBig[now].style.height=0;
startMove(aLiBig[now],'height',320);
if(now==0)
{
startMove(oUlSmall,'left',0);
}
else if(now==aLiSmall.length-1)
{
startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
}
else
{
startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
}
}
aLiSmall[i].onmouseover=function()
{
startMove(this,'opacity',100);
}
aLiSmall[i].onmouseout=function()
{
if(this.index!=now)
{
startMove(this,'opacity',60);
}
}
}
//左右按钮的淡入与淡出代码
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);
}
oBtnPrev.onclick=function()
{
now--;
if(now==-1)
{
now=aLiSmall.length-1;
}
tab();
}
oBtnNext.onclick=function()
{
now++
if(now==aLiSmall.length)
{
now=0;
}
tab();
}
var timer=setInterval(oBtnNext.onclick,8000);
oDiv.onmouseover=function()
{
clearInterval(timer);
}
oDiv.onmouseout=function()
{
timer=setInterval(oBtnNext.onclick,8000);
}
}
</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/400_320/1.jpg" /></li>
<li><img src="images/400_320/2.jpg" /></li>
<li><img src="images/400_320/3.jpg" /></li>
<li><img src="images/400_320/4.jpg" /></li>
<li><img src="images/400_320/5.jpg" /></li>
<li><img src="images/400_320/6.jpg" /></li>
<li><img src="images/400_320/1.png" /></li>
<li><img src="images/400_320/2.png" /></li>
<li><img src="images/400_320/3.png" /></li>
<li><img src="images/400_320/4.png" /></li>
<li><img src="images/400_320/5.png" /></li>
<li><img src="images/400_320/6.png" /></li>
<li><img src="images/400_320/7.png" /></li>
<li><img src="images/400_320/8.png" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter:100;opacity:1"><img src="images/120_94/1.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/2.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/3.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/4.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/5.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/6.jpg" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/1.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/2.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/3.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/4.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/5.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/6.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/7.png" /></li>
<li style="filter:100;opacity:1"><img src="images/120_94/8.png" /></li>
</ul>
</div>
</div>
</body>
</html>
2015年