仿Flash的图片轮换效果

发布者:聂永彬     所属单位:樟树第三中学     发布时间:2016-02-04    浏览数:0

<!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年